<!doctype html>
|
<html class="no-js">
|
<head>
|
<meta charset="utf-8">
|
<title>备品备件库存数量统计</title>
|
[#include "/business/pages/include/static.html" /]
|
[#include "/component/DatePicker.html" /]
|
[#include "/component/newsel.html" /]
|
<style>
|
.tonji{width:100%;table-layout:auto;border-collapse:collapse;border-spacing:0; border-top:1px solid #666;border-left:1px solid #666}
|
.tonji td{ border-bottom:1px solid #666;border-right:1px solid #666;line-height:24px;padding-left:10px;}
|
</style>
|
</head>
|
<body>
|
<form id="myform" >
|
<div class="event_fill sa_event_fill">
|
<table><tr><th width="85%">
|
|
<div class="fill_item">
|
<label>一级分类：</label>
|
[@sel id="lv1Id" name="lv1Id" source=lv1List textField="lv1Name" textField="id" valueField="name" callback="changeLv1" /]
|
</div>
|
|
<div class="fill_item">
|
<label>二级分类：</label>
|
[@sel id="lv2Id" name="lv2Id" textField="id" valueField="name"/]
|
</div>
|
|
|
</th><td width="15%">
|
<!-- <a class="retrievebtn" href="javascript:window.location.reload(true);">重置</a> -->
|
<a class="retrievebtn" id="reset">重置</a>
|
<a class="retrievebtn focus" href="javascript:query();">查询</a>
|
</td></tr></table>
|
</div>
|
|
<div class="clearfix"></div>
|
<div class="statnan_right">
|
<div id="pieChart" style="width:98%;height:90%;"></div>
|
</div>
|
</form>
|
<script type="text/javascript">
|
|
|
function query() {
|
var lv1Id = $.trim($("#lv1Id").val());
|
var lv2Id = $.trim($("#lv2Id").val());
|
$.post("${base}/business/pages/tj/sparePartStatis/spareTypeChart.html",{"lv1Id":lv1Id,"lv2Id":lv2Id},
|
function(data,textStatus) {
|
showPieChart(data);
|
},"json");
|
}
|
|
|
function showPieChart(data) {
|
var charTitle = '<b>'+'备品备件库存数量统计';
|
|
$("#pieChart").highcharts({
|
chart: {
|
type: 'pie'
|
},
|
|
colors:['#ca8622','#bda29a','#6e7074','#546570','#c23531','#d48265','#91c7ae','#749f83','#334b5c','#61a0a8'],
|
title: {
|
text: charTitle
|
},
|
tooltip: {
|
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
},
|
|
plotOptions: {
|
pie: {
|
allowPointSelect: true,
|
cursor: 'pointer',
|
depth: 35,
|
dataLabels: {
|
enabled: true,
|
//format: '{point.name}{point.percentage:.1f}%'
|
format: '{point.y}<br/>{point.percentage:.1f}%',
|
useHtml:true
|
},
|
showInLegend: true,
|
size: 280,
|
events:{
|
click:function(e){
|
if(e.point.lv==1){
|
queryLv1(e.point.id,"","");
|
}else if(e.point.lv==2){
|
queryLv1(e.point.lv1_id,e.point.id,e.point.name);
|
}
|
}
|
}
|
}
|
},
|
series: [{
|
type: 'pie',
|
name: '占比',
|
data: data
|
}]
|
});
|
}
|
|
function queryLv1(lv1Id,lv2Id,lv2name) {
|
$("#lv1Id").val(lv1Id,lv2Id);
|
if(lv2Id!=""){
|
change(lv1Id,lv2Id);
|
}else{
|
changeLv1(lv1Id);
|
}
|
$.post("${base}/business/pages/tj/sparePartStatis/spareTypeChart.html",{"lv1Id":lv1Id,"lv2Id":lv2Id},
|
function(data,textStatus) {
|
showPieChart(data);
|
},"json");
|
}
|
function change(lv1Id,lv2Id) {
|
$.post("${base}/business/pages/tj/sparePartStatis/getCategotyList.html",{"lv1Id":lv1Id},function(data,textStatus) {
|
var optionHtml = "<option value=''>请选择</option>";
|
$.each(data,function(i,item) {
|
if(lv2Id==item.id){
|
optionHtml += "<option value='"+item.id+"' selected>"+item.name+"</option>";
|
}else{
|
optionHtml += "<option value='"+item.id+"'>"+item.name+"</option>";
|
}
|
|
})
|
$('#lv2Id').html(optionHtml);
|
},"json")
|
}
|
|
function changeLv1(lv1Id) {
|
$.post("${base}/business/pages/tj/sparePartStatis/getCategotyList.html",{"lv1Id":lv1Id},function(data,textStatus) {
|
var optionHtml = "<option value=''>请选择</option>";
|
$.each(data,function(i,item) {
|
optionHtml += "<option value='"+item.id+"'>"+item.name+"</option>";
|
})
|
$('#lv2Id').html(optionHtml);
|
},"json")
|
}
|
|
$(function() {
|
$("#reset").click(function () {
|
$("#myform")[0].reset();
|
var optionHtml = "<option value=''>请选择</option>";
|
$('#lv2Id').html(optionHtml);
|
});
|
query();
|
})
|
|
|
</script>
|
|
</body>
|
</html>
|
