This commit is contained in:
季圣华
2016-10-30 12:30:58 +08:00
parent 6d34773ad5
commit 8789548455
7 changed files with 1393 additions and 0 deletions

View File

@@ -0,0 +1,727 @@
<%@page import="com.jsh.util.common.Tools"%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String clientIp = Tools.getCurrentUserIP();
String type = request.getParameter("type");
String location = "首页";
if(null != type)
location = "资产管理 &gt;资产概况";
%>
<!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">
<head>
<title>erp</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 指定以IE8的方式来渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
<link rel="shortcut icon" href="<%=path%>/images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="<%=path %>/js/easyui-1.3.5/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="<%=path %>/js/easyui-1.3.5/themes/icon.css"/>
<script type="text/javascript" src="<%=path %>/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/easyui-1.3.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/easyui-1.3.5/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path%>/js/highcharts/highcharts.js"></script>
<script type="text/javascript" src="<%=path%>/js/highcharts/exporting.js"></script>
<style>
body{ margin:0; height:100%}
html{ height:100%} /*兼容firefox的div高度100%*/
#left{ width:150px; height:100%; float:left; _margin-right:-3px;}
#right{ height:100%;}
#leftdown{ width:150px; height:100%; float:left; _margin-right:-3px;}
#rightdown{ height:100%;}
<!--页面展示特殊要求-->
.datagrid-body,.datagrid-footer,.datagrid-pager ,.datagrid-view
{
background-color:#EAF2FD;
}
</style>
</head>
<body>
<div id="position" class="easyui-panel" title="当前位置: <%=location %>" collapsible="false" closable="false"/>
<!--按月统计资产柱状图 -->
<div id = "tablePanel0" class="easyui-panel" style="padding:1px;top:300px;" title="资产报表" iconCls="icon-chart-column" collapsible="true" maximizable="false" closable="false">
<div id="left" class="easyui-tabs" style="width:630px;height:auto;padding:1px;">
<div title="综合图" style="padding:10px;background-color: #EAF2FD;height:340px;top:300px;" data-options="iconCls:'icon-chart-zonghe'">
<div id="zongheContainer" style="height: 340px;">综合图</div>
</div>
</div>
<div id="right" class="easyui-tabs" style="height:auto;padding:1px;">
<div title="柱状图" style="padding:10px;background-color: #EAF2FD;height:340px;top:300px;" data-options="iconCls:'icon-chart-statistics'">
<div id="culumnContainer" style="height: 340px;">柱状图</div>
</div>
</div>
<div id="leftdown" class="easyui-tabs" style="width:630px;height:auto;padding:1px;">
<div title="折线图" data-options="iconCls:'icon-chart-polygram'" style="padding:10px;background-color: #EAF2FD;height:340px;top:300px;">
<div id="zxianContainer" style="height: 340px;">折现图</div>
</div>
</div>
<div id="rightdown" class="easyui-tabs" style="height:auto;padding:1px;">
<div title="饼状图" data-options="iconCls:'icon-chart-pie'" style="padding:10px;background-color: #EAF2FD;height:340px;top:300px;">
<div id="pieContainer" style="height: 340px;">饼状图</div>
</div>
</div>
</div>
<!-- 数据显示table -->
<div id = "tablePanel" class="easyui-panel" style="padding:1px;top:300px;" title="资产列表" iconCls="icon-list" collapsible="true" closable="false">
<table id="tableData" style="height:360px;top:300px;border-bottom-color:#FFFFFF"></table>
</div>
<script type="text/javascript">
//控制图表显示个数
var showNum = 10;
//初始化界面
$(function()
{
//progress();
$.messager.progress({
title:'请稍候',
msg:'数据加载ing...'
});
//综合图
showComboChart();
//显示柱状图
showHistogram();
//折线图
showSpline();
//饼状图
showPieChart();
initTableData();
ininPager();
$.messager.progress('close');
});
//加载进度条
function progress()
{
var win = $.messager.progress({
title:'请稍候',
msg:'数据加载ing...'
});
setTimeout(function(){
$.messager.progress('close');
},3300);
}
//初始化表格数据
function initTableData()
{
$('#tableData').datagrid({
//title:'资产列表',
//iconCls:'icon-save',
//width:700,
//height:480,
nowrap: false,
rownumbers: false,
//动画效果
animate:false,
//选中单行
singleSelect : true,
collapsible:false,
selectOnCheck:false,
//fitColumns:true,
//单击行是否选中
checkOnSelect : false,
//交替出现背景
striped : true,
url:'<%=path %>/asset/findBy.action',
pagination: true,
//loadFilter: pagerFilter,
pageSize: 10,
pageList: [10,20,30,50],
frozenColumns:[[
{ field: 'id',width:35,align:"center",checkbox:true},
{ title: '资产名称',field: 'assetname',width:100},
{ title: '单价', field: 'price',width:70,align:"center"},
{ title: '资产类型', field: 'category',width:115,align:"center"},
{ title: '用户',field: 'username',width:100,align:"center"},
{ title: '购买日期',field: 'purchasedate',width:90,align:"center"},
{ title: '状态',field: 'status',width:50,align:"center"},
{ title: '位置',field: 'location',width:100,align:"center"},
{ title: '资产编号',field: 'assetnum',width:120,align:"center"},
{ title: '序列号',field: 'serialnum',width:120,align:"center"}
]],
columns:[[
{ title: '有效日期',field: 'periodofvalidity',width:90,align:"center"},
{ title: '保修日期',field: 'warrantydate',width:90,align:"center"},
{ title: '供应商',field: 'supplier',width:100,align:"center"},
{ title: '标签',field: 'labels',width:180,align:"center"},
{ title: '描述',field: 'description',width:300}
]],
onLoadError:function()
{
$.messager.alert('页面加载提示','页面加载异常,请稍后再试!','error');
return;
}
});
}
//分页信息处理
function ininPager()
{
try
{
var opts = $("#tableData").datagrid('options');
var pager = $("#tableData").datagrid('getPager');
pager.pagination({
onSelectPage:function(pageNum, pageSize)
{
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',
{
pageNumber:pageNum,
pageSize:pageSize
});
showAssetDetails(pageNum,pageSize);
}
});
}
catch (e)
{
$.messager.alert('异常处理提示',"分页信息异常 : " + e.name + ": " + e.message,'error');
}
}
function showAssetDetails(pageNo,pageSize)
{
$.ajax({
type:"post",
url: "<%=path %>/asset/findBy.action",
dataType: "json",
data: ({
assetNameID:$.trim($("#searchAssetNameID").val()),
assetCategoryID:$.trim($("#searchCategoryID").val()),
usernameID:$.trim($("#searchUsernameID").val()),
status:$.trim($("#searchStatus").val()),
supplierID:$.trim($("#searchSupplierID").val()),
pageNo:pageNo,
pageSize:pageSize
}),
success: function (data)
{
$("#tableData").datagrid('loadData',data);
//$('#tableData').datagrid('reload');
},
//此处添加错误处理
error:function()
{
$.messager.alert('查询提示','查询数据后台异常,请稍后再试!','error');
return;
}
});
}
//设置饼状图为渐变色
Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
//饼状图
function showPieChart()
{
var pageData = null;
$.ajax({
type:"post",
url: "<%=path%>/report/find.action",
dataType: "json",
//取消异步机制,保证页面数据返回再进行处理
async: false,
data: ({
reportType : 2,
}),
success: function (reportInfo)
{
pageData = reportInfo.showModel.reportData;
var msgTip = reportInfo.showModel.msgTip;
if(msgTip == "get report data exception")
{
alert("查找报表信息异常,请与管理员联系!");
return;
}
}
});
//解决初始化范围变小问题
$("#pieContainer").empty();
var getReportTypeInfo = "按供应商统计";
//封装数据到数组中
var allDataInfo = new Array();
for(var i = 0;i < pageData.length; i++)
{
var dataInfo = new Array();
var totalInfo = pageData[i]
dataInfo.push(totalInfo[1]);
dataInfo.push(totalInfo[0]);
allDataInfo.push(dataInfo);
}
new Highcharts.Chart({
chart: {
renderTo: 'pieContainer',
plotBackgroundColor: null,
plotBorderWidth: null,
backgroundColor:'#EAF2FD',
plotShadow: false
},
title: {
text: getReportTypeInfo + "饼状图"
},
tooltip: {
formatter: function() {
return this.point.name +':'+ this.y + "个";
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
if(this.point.name.length >10)
return '<b>' + this.point.name.substr(0,10) + "</b>...:"+ this.y + "个";
return '<b>' + this.point.name +'</b>:'+ this.y + "个";
}
}
}
},
series: [{
type: 'pie',
name: '',
data: allDataInfo
}]
});
}
//综合图
function showComboChart()
{
var pageData = null;
$.ajax({
type:"post",
url: "<%=path%>/report/find.action",
dataType: "json",
//取消异步机制,保证页面数据返回再进行处理
async: false,
data: ({
reportType : 0
}),
success: function (reportInfo)
{
pageData = reportInfo.showModel.reportData;
var msgTip = reportInfo.showModel.msgTip;
if(msgTip == "get report data exception")
{
alert("查找报表信息异常,请与管理员联系!");
return;
}
}
});
//解决初始化范围变小问题
$("#zongheContainer").empty();
var getReportTypeInfo = "按资产状态统计";
//按照统计数据封装显示数据
var xName = new Array();
var columnData = new Array();
var columnDataForm = null;
var averageDataForm = null;
var allDataSum = 0;
var showNumInfo = 0;
if(pageData.length >= showNum)
showNumInfo = 10;
else
showNumInfo = pageData.length;
for(var i = 0 ;i < showNumInfo;i ++)
{
var eachData = pageData[i];
var sum = eachData[0];
var totalInfo = eachData[1];
if(0 == totalInfo)
xName.push("在库");
else if(1 == totalInfo)
xName.push("在用");
else if(2 == totalInfo)
xName.push("消费");
columnData.push(sum);
allDataSum += sum;
}
columnDataForm =
{
type: 'column',
name: "资产总数",
data: columnData
};
averageDataForm = {
type: 'spline',
name: getReportTypeInfo + '资产概况曲线',
data: columnData,
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
};
sumDataForm =
{
type: 'pie',
name: '总数',
data: [{
name: '资产总数',
y: allDataSum
}],
center: [450, 1],
size: 80,
showInLegend: false,
dataLabels: {
enabled: true,
align:'center'
}
}
new Highcharts.Chart({
chart: {
renderTo: 'zongheContainer',
backgroundColor:'#EAF2FD'
},
title: {
text: getReportTypeInfo + "综合图"
},
xAxis: {
categories: xName
},
yAxis: {
title: {
text: ''
},
labels: {
formatter: function() {
return this.value;
}
}
},
plotOptions: {
column: {
cursor: 'pointer',
dataLabels: {
enabled: true,
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y;
}
},
//设置是否显示最下面选项
showInLegend: false
},
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
},
showInLegend: false
},
line: {
dataLabels: {
enabled: false
},
enableMouseTracking: true,
showInLegend: false
},
pie: {
allowPointSelect: false,
dataLabels: {
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '资产总数: '+ this.y;
}
}
}
},
tooltip: {
formatter: function() {
return this.key +':'+ this.y +' 个';
}
},
labels: {
items: [{
html: '',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
},
series: [columnDataForm,averageDataForm,sumDataForm]
});
}
//折线图
function showSpline()
{
var pageData = null;
$.ajax({
type:"post",
url: "<%=path%>/report/find.action",
dataType: "json",
//取消异步机制,保证页面数据返回再进行处理
async: false,
data: ({
reportType : 1
}),
success: function (reportInfo)
{
pageData = reportInfo.showModel.reportData;
var msgTip = reportInfo.showModel.msgTip;
if(msgTip == "get report data exception")
{
alert("查找报表信息异常,请与管理员联系!");
return;
}
}
});
//解决初始化范围变小问题
$("#zxianContainer").empty();
var getReportTypeInfo = "按资产类型统计";
var dataInfo = new Array();
var nameData = new Array();
var consumeSumInfo= null;
var showNumInfo = 0;
if(pageData.length >= showNum)
showNumInfo = 10;
else
showNumInfo = pageData.length;
for(var i = 0 ;i < showNumInfo;i ++)
{
var totalInfo = pageData[i]
dataInfo.push(totalInfo[0]);
nameData.push(totalInfo[1]);
}
consumeSumInfo= {
name: getReportTypeInfo + '总共',
marker: {
symbol: 'square',
labels: {
formatter: function()
{
return this.value +'个';
}
}
},
data: dataInfo
};
new Highcharts.Chart({
chart: {
renderTo: 'zxianContainer',
type: 'line',
backgroundColor:'#EAF2FD'
},
title: {
text: getReportTypeInfo + "曲线图"
},
subtitle: {
text: ''
},
xAxis: {
categories: nameData,
labels: {
rotation: -45, //逆时针旋转45°标签名称太长。
align: 'right', //设置右对齐
formatter: function() {
if(this.value.length >10)
return this.value.substr(0,10) + "...";
return this.value ;
}
}
},
yAxis: {
title: {
text: ''
},
labels: {
formatter: function() {
return this.value ;
}
}
},
tooltip: {
crosshairs: false,
shared: true,
formatter: function() {
return this.x + ":" +this.y +'个';
}
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
},
showInLegend: false
},
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: true,
showInLegend: false
}
},
series: [consumeSumInfo]
});
}
//柱状图
function showHistogram()
{
var pageData = null;
$.ajax({
type:"post",
url: "<%=path%>/report/find.action",
dataType: "json",
//取消异步机制,保证页面数据返回再进行处理
async: false,
data: ({
reportType : 3,
}),
success: function (reportInfo)
{
pageData = reportInfo.showModel.reportData;
var msgTip = reportInfo.showModel.msgTip;
if(msgTip == "get report data exception")
{
alert("查找报表信息异常,请与管理员联系!");
return;
}
}
});
//解决初始化范围变小问题
$("#culumnContainer").empty();
var getReportTypeInfo = "按资产名称统计";
var dataInfo = new Array();
var nameData = new Array();
var consumeSumInfo= null;
var showNumInfo = 0;
if(pageData.length >= showNum)
showNumInfo = 10;
else
showNumInfo = pageData.length;
for(var i = 0 ;i < showNumInfo;i ++)
{
var totalInfo = pageData[i];
dataInfo.push(totalInfo[0]);
nameData.push(totalInfo[1]);
}
consumeSumInfo= {
name: getReportTypeInfo + "柱状图",
data: dataInfo
}
new Highcharts.Chart({
chart: {
renderTo: 'culumnContainer',
type: 'column',
backgroundColor:'#EAF2FD'
},
title: {
text: getReportTypeInfo + "柱状图"
},
xAxis: {
categories: nameData,
labels: {
rotation: -45, //逆时针旋转45°标签名称太长。
align: 'right', //设置右对齐
formatter: function() {
if(this.value.length >10)
return this.value.substr(0,10) + "...";
return this.value ;
}
}
},
yAxis: {
title: {
text: ''
},
labels: {
formatter: function() {
return this.value;
}
}
},
plotOptions: {
column: {
cursor: 'pointer',
dataLabels: {
enabled: true,
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y;
}
},
showInLegend: false
}
},
tooltip: {
formatter: function() {
return this.x + ":" +this.y +'个';
}
},
credits: {
enabled: false
},
series: [consumeSumInfo]
});
}
//返回统计类型字符串
function getReportType()
{
var reportType = $("#searchReportType").val();
if(reportType==0)
{
return '按资产状态统计';
}
else if(reportType==1)
{
return '按资产类型统计';
}
else if(reportType==2)
{
return '按供应商统计';
}
else if(reportType==3)
{
return '按资产名称统计';
}
else if(reportType==4)
{
return '按所属用户统计';
}
}
</script>
</body>
</html>