ssh 统计图表
首先，需要在action你建立方法
@RequestMapping("/StaGyGasCql")
public ModelAndView StaGyGasCql() {
ModelAndView mv = new ModelAndView("gygas/statistic/StaGyGasCql");
return mv;
}
之后建立对应的页面文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${Application.consolename}</title>
<#include '/common/input.ftl'>
<script src="${base}/resource/thirdparty/echarts/build/dist/echarts.js" type="text/javascript"></script>
<script src="${base}/resource/thirdparty/echarts/js/macarons.js" type="text/javascript"></script>
<script type="text/javascript">
var isjgprovinceorg=0;
<#if Session.admin_seesion_unit_type=='03'&&Session.admin_seesion_unit_level=='1'>
isjgprovinceorg=1;
</#if>
</script>
<script src="${base}/resource/gygas/StaGyGasCql.js"></script>
<style>
.layui-layer-tab .layui-layer-title{padding:0;overflow: hidden;}
</style>
</head>
<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->
<body>
<div id="container" class="effect aside-float aside-bright mainnav-lg footer-fixed navbar-fixed">
<!--NAVBAR-->
<!--===================================================-->
<#include "/common/admin/navbar.ftl">
<!--===================================================-->
<!--END NAVBAR-->
<div class="boxed">
<!--CONTENT CONTAINER-->
<!--===================================================-->
<div id="content-container">
<div id="page-content">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">工业气瓶超期率<span id="backspan"></span></h3>
<input type="hidden" id="onlinePath" value="${(onlinePath)!}"/>
<input type="hidden" id="countArea"/>
</div>
<!--Page content-->
<div class="container-fluid">
<!--第一行-->
<div class="row box">
<!--第一行左边-->
<div class="col-md-12">
<div class="top_l" style="height:300px;">
<div class="top_lb">
<div class="row">
<div class="col-md-12 top_lb_r" >
<div style="height:300px" id="container2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row box">
<div id="page-content">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title" style="display:inline;color:red;" id="tab_title"><span class="span_title" style="color:darkred;margin-right:12px;"></span>超期气瓶</h3>
<div style="float:right;padding-right:30px;padding-top:10px;">
<button class="btn btn-rounded" style="background-color:#758697;"></button><lable style="color:#758697"> 在用</lable>
<button class="btn btn-rounded" style="background-color:#ca0c16;"></button><lable style="color:#ca0c16"> 超期</lable>
<button class="btn btn-rounded" style="background-color:#ce9178;"></button><lable style="color:#ce9178"> 注销</lable>
<button class="btn btn-rounded" style="background-color:#ff9632;"></button><lable style="color:#ff9632"> 报废</lable>
</div>
<input type="hidden" id="onlinePath" value="${(onlinePath)!}">
</div>
<div class="panel-body">
<table id="lpggas-cqlist-table"
style="word-break: break-all; word-wrap: break-all;"
class="demo-add-niftycheck" data-toggle="table"
data-url="${base}/GyGas/GyGas/GetGyGasCqGasList"
data-toolbar="#demo-delete-row" data-search="true"
data-show-refresh="false" data-show-toggle="false"
data-click-to-select="true" data-sort-name="modifyDate"
data-sort-order="desc" data-page-list="[10, 20, 50,100]"
data-page-size="5" data-striped="true" data-page-number="1"
data-side-pagination="server" data-query-params-type=""
data-query-params="queryParams" data-pagination="true"
data-show-pagination-swiGyGash="false"
data-row-style="setQplistRowcolor"
>
<thead>
<tr>
<th data-valign="middle" data-field="state"
data-checkbox="true"></th>
<th data-valign="middle" data-field="sydw.name"
data-sortable="true">充装企业</th>
<th data-valign="middle" data-field="regid"
data-sortable="true">登记证编号</th>
<th data-valign="middle" data-field="originid"
data-sortable="true">产品编号</th>
<th data-valign="middle" data-field="gastype"
data-sortable="true">设备品种</th>
<th data-valign="middle" data-field="tagid"
data-sortable="true">标签号</th>
<th data-valign="middle" data-field="qrcode"
data-sortable="true">二维码号</th>
<th data-valign="middle" data-field="makedate"
data-sortable="true">制造日期</th>
<th data-valign="middle" data-field="checkdate"
data-sortable="true">检验日期</th>
<th data-valign="middle" data-field="nextcheckdate"
data-sortable="true">下次检验日期</th>
<th data-valign="middle" data-field="gasstate"
data-sortable="true">气瓶状态</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<!--===================================================-->
<!--End page content-->
</div>
</div>
</div>
</div>
<!--===================================================-->
<!--END CONTENT CONTAINER-->
<!--MAIN NAVIGATION-->
<!--===================================================-->
<nav id="mainnav-container">
<div id="mainnav">
<!--左侧目录树-->
<!--================================-->
<#include "/common/admin/lefttree.ftl">
<!--================================-->
<!--左侧目录树-->
</div>
</nav>
<!--===================================================-->
<!--END MAIN NAVIGATION-->
</div>
<!-- FOOTER -->
<!--===================================================-->
<footer id="footer">
<!-- Visible when footer positions are static -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="show-fixed pull-right pad-rgt">
© 2019 危化品储运容器质量监督检验中心
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Remove the class "show-fixed" and "hide-fixed" to make the content always appears. -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
</footer>
<!--===================================================-->
<!-- END FOOTER -->
<!-- SCROLL PAGE BUTTON -->
<!--===================================================-->
<button class="scroll-top btn">
<i class="pci-chevron chevron-up"></i>
</button>
<!--===================================================-->
</div>
<!--===================================================-->
<!-- END OF CONTAINER -->
</body>
</html>
页面建好之后，编写对应的js
$(document).ready(function(){ajaxContainer1(); });
function ajaxContainer1(){
$("#backspan").empty();
var myChart;
var options;
// 路径配置
require.config({
paths: {
echarts: base+'/resource/thirdparty/echarts/build/dist/'
}
});
require(
[
'echarts',
'echarts/chart/line', // 按需加载
'echarts/chart/bar' // 按需加载
],
//渲染ECharts图表
function (ec) {
var chartContainer = document.getElementById("container2");//图表渲染的容器对象
myChart = ec.init(chartContainer);//加载图表
myChart.showLoading({text: "图表数据正在努力加载..."});//图表显示提示信息
var baridx=0;
options = {
title : {
show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏）
text: '',//主标题文本，'\n'指定换行
},
backgroundColor: '#fff', //背景颜色
legend: {
data:['']
},
tooltip: {//鼠标悬停显示内容
show: true,
trigger: 'axis',
showDelay: 0,//显示延时，添加显示延时可以避免频繁切换
hideDelay: 50,//隐藏延时
transitionDuration: 0,//动画变换时长
backgroundColor: 'rgba(0,0,0,0.7)',//背景颜色（此时为默认色）
borderRadius: 8,//边框圆角
padding: 10, // [5, 10, 15, 20] 内边距
position: function (p) {// 位置回调
return [p[0] + 10, p[1] - 10];
},
formatter: function (params, ticket, callback) {
// console.log(params[0]);
var dataIdx=params[0].dataIndex;
var res = "地区：" + params[0].name + "<br/>";
var dataall=params[0].series.alldata[dataIdx];
var datacq=params[0].series.cqdata[dataIdx];
res+="超期："+datacq+"<br/>";
res+="全部："+dataall+"<br/>";
return res +=params[0].seriesName + ':' + params[0].value+'%';
}
},
calculable : false,//是否允许拖动 否
xAxis : [
{
type: 'category',
axisLabel: {
interval: 0, //强制文字产生间隔
rotate: 45, //文字逆时针旋转45°
textStyle: { //文字样式
color: "black",
fontSize: 10,
fontFamily: 'Microsoft YaHei'
}
}
}
],
yAxis : [{
type : 'value'
}],
series : [{
name:'超期率',
type:'bar',
data:[],
datax_areacode:[],
alldata:[],
cqdata:[],
itemStyle: {//柱子上方显示数值
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示 inside top
textStyle: { //数值样式
color: '#333',
fontSize: 10
},
formatter: function(params) {
var datacq=params.series.cqdata[baridx];
var dataall=params.series.alldata[baridx];baridx++;
if(params.value)
return params.value + '%' +" ("+datacq+"/"+dataall+")"
else
return '';
}
}
}
}
}
]
};
//通过Ajax获取数据
$.ajax({
type: "post",
async: false, //同步执行
url: base+"/GyGas/GyGasStatistic/StaGyGasCqlByCompany",
data: {"ddlGasType":$("#DDL_GasType").val()},
dataType: "json", //返回数据形式为json
success: function (result) {
if (result) {
$("#countArea").val(result.data.countArea);
$(".span_title").text(result.data.countArea);
options.title.text=result.data.countArea+"总数："+result.data.all+"，超期："+result.data.cq+"，超期率："+result.data.cqrate+"%";
options.xAxis[0].data = result.data.datax;
options.series[0].datax_areacode = result.data.datax_areacode;
options.series[0].data = result.data.datay;
options.series[0].alldata = result.data.dataall;
options.series[0].cqdata = result.data.datacq;
myChart.hideLoading();
myChart.setOption(options);
}
},
error: function (x,y,z) {
console.log(x);
console.log(y);
console.log(z);
layer.msg("不好意思，图表请求数据失败啦!");
}
});
if (isjgprovinceorg){
myChart.on('click', function (params) {
var clickedAreacode=myChart.getOption().series[0].datax_areacode[params.dataIndex];
$("#backspan").empty();
$("#backspan").append("<a style='color:green;' href='javascript:void(0)' οnclick='ajaxContainer1();'> 返回<span class='spanparent_title'></span>数量统计</a>");
myChart = ec.init(chartContainer,theme);//加载图表
$.ajax({
type: "post",
async: false, //同步执行
url: base+"/GyGas/GyGasStatistic/StaGyGasCqlByCompany",
data: {"clickedAreacode":clickedAreacode},
dataType: "json", //返回数据形式为json
success: function (result) {
if (result) {
baridx=0;
var parentarea=$("#countArea").val();
$("#countArea").val(result.data.countArea);
$(".span_title").text(result.data.countArea);
$(".spanparent_title").text(parentarea);
options.title.text=result.data.countArea+"总数："+result.data.all+"，超期："+result.data.cq+"，超期率："+result.data.cqrate+"%";
options.xAxis[0].data = result.data.datax;
options.series[0].datax_areacode = result.data.datax_areacode;
options.series[0].data = result.data.datay;
options.series[0].alldata = result.data.dataall;
options.series[0].cqdata = result.data.datacq;
myChart.hideLoading();
myChart.setOption(options);
setTimeout(function(){
$table=$("#lpggas-cqlist-table");
var clickedAreacode=result.data.countAreacode;
$table.bootstrapTable("refresh",{url:$table.attr("data-url")+"?areaCode="+clickedAreacode});
},1000);
}
},
error: function (x,y,z) {
console.log(x);
console.log(y);
console.log(z);
layer.msg("不好意思，图表请求数据失败啦!");
}
});
});
}else{
$table=$("#lpggas-cqlist-table");
myChart.on('click', function (params) {
var clickedAreacode=myChart.getOption().series[0].datax_areacode[params.dataIndex];
$(".span_title").text($("#countArea").val()+"->"+params.name);
$table.bootstrapTable("refresh",{url:$table.attr("data-url")+"?areaCode="+clickedAreacode});
});
}
});
}
对应的查询方法如下
/***
* 超期率
*/
@ResponseBody
@RequestMapping("/StaGyGasCqlByCompany")
public void StaGyGasCqlByCompany() {
String condition=" NextCheckDate<GETDATE() and GasState='在用' ";
StaCommon(condition,"GyGas");
}
/***
* 用于超期率、报废率、充装率
*/
private void StaCommon(String condition,String counttable) {
try {
Map<String, Object> jsonMap = new HashMap<String, Object>();
List<String> datax = new ArrayList<String>();
List<String> datax_areacode = new ArrayList<String>();
List<String> datay = new ArrayList<String>();
List<String> datacq = new ArrayList<String>();
List<String> dataall = new ArrayList<String>();
String countArea="";
String countAreacode="";
String clickedAreacode=getRequest().getParameter("clickedAreacode");
String all="";
String cq="";
String cqrate="";
String loginunitlevel = getLoginUnitLevel();
Map<String,Object>conmap = new HashMap<String,Object>();
String base_allsql="select count(1) COUNT from GyGas l where EXISTS(SELECT 1 from SYS_USE_UNIT u where u.id=l.SydwId ";
String base_cqsql="select count(1) COUNT from "+counttable+" l where "+condition;
List<TabDictionary> areadiclist = new ArrayList<TabDictionary>();
TabUseUnit lu =getLoginUnit();
String district=lu.getDistrict();
String districtView=lu.getDistrictView();
if("1".equals(loginunitlevel)){
if(StrKit.isBlank(clickedAreacode)){
countArea=districtView.substring(0,districtView.indexOf("/"));
Map<Object,Object> allmap =tabDictionaryService.getBySql(base_allsql+" and SUBSTRING(u.district,0, 7)='"+district.substring(0,6)+"')");
Map<Object,Object> cqmap = tabDictionaryService.getBySql(base_cqsql+" and EXISTS(SELECT 1 from SYS_USE_UNIT u where u.id=l.SydwId and SUBSTRING(u.district, 0, 7)='"+district.substring(0,6)+"')");
int allcount = allmap.get("COUNT")==null?0:Integer.parseInt(allmap.get("COUNT").toString());
int cqcount = cqmap.get("COUNT")==null?0:Integer.parseInt(cqmap.get("COUNT").toString());
all=""+allcount;
cq=""+cqcount;
if(allcount==0)
cqrate="0";
else{
float rt= ((float)cqcount/(float)allcount)*100;
cqrate=String.valueOf(rt);
if(cqrate.contains("."))cqrate=cqrate.substring(0,cqrate.indexOf("."));
}
/
conmap.put("type", "REGIONAL");
conmap.put("parentCode",district.substring(0,6));
areadiclist = tabDictionaryService.getList(conmap);
base_allsql+=" and SUBSTRING(u.district, 8, 6)=";
base_cqsql +=" and EXISTS(SELECT 1 from SYS_USE_UNIT u where u.id=l.SydwId and SUBSTRING(u.district, 8, 6)=";
}else{
TabDictionary areadic=tabDictionaryService.getDicAreaByCode(clickedAreacode);
countArea=areadic.getName();
countAreacode=areadic.getCode();
Map<Object,Object> allmap =tabDictionaryService.getBySql(base_allsql+" and SUBSTRING(u.district,8, 6)='"+areadic.getCode()+"')");
Map<Object,Object> cqmap = tabDictionaryService.getBySql(base_cqsql+" and EXISTS(SELECT 1 from SYS_USE_UNIT u where u.id=l.SydwId and SUBSTRING(u.district, 8, 6)='"+areadic.getCode()+"')");
int allcount = allmap.get("COUNT")==null?0:Integer.parseInt(allmap.get("COUNT").toString());
int cqcount = cqmap.get("COUNT")==null?0:Integer.parseInt(cqmap.get("COUNT").toString());
all=""+allcount;
cq=""+cqcount;
if(allcount==0)
cqrate="0";
else{
float rt= ((float)cqcount/(float)allcount)*100;
cqrate=String.valueOf(rt);
if(cqrate.contains("."))cqrate=cqrate.substring(0,cqrate.indexOf("."));
}
/
conmap.put("type", "REGIONAL");
conmap.put("parentCode",areadic.getCode());
areadiclist = tabDictionaryService.getList(conmap);
base_allsql+=" and SUBSTRING(u.district, 15, 21)=";
base_cqsql +=" and EXISTS(SELECT 1 from SYS_USE_UNIT u where u.id=l.SydwId and SUBSTRING(u.district, 15, 21)=";
}
}else{
countArea=districtView.substring(districtView.indexOf("/"));
countAreacode=district.substring(district.indexOf("/"));
if(countArea.contains("/"))countArea=countArea.substring(0+1,districtView.indexOf("/")+1);
if(countAreacode.contains("/"))countAreacode=countAreacode.substring(0+1,district.indexOf("/")+1);
Map<Object,Object> allmap =tabDictionaryService.getBySql(base_allsql+" and SUBSTRING(u.district,8, 6)='"+district.substring(7,13)+"')");
Map<Object,Object> cqmap = tabDictionaryService.getBySql(base_cqsql+" and EXISTS(SELECT 1 from SYS_USE_UNIT u where u.id=l.SydwId and SUBSTRING(u.district, 8, 6)='"+district.substring(7,13)+"')");
int allcount = allmap.get("COUNT")==null?0:Integer.parseInt(allmap.get("COUNT").toString());
int cqcount = cqmap.get("COUNT")==null?0:Integer.parseInt(cqmap.get("COUNT").toString());
all=""+allcount;
cq=""+cqcount;
if(allcount==0)
cqrate="0";
else{
float rt= ((float)cqcount/(float)allcount)*100;
cqrate=String.valueOf(rt);
if(cqrate.contains("."))cqrate=cqrate.substring(0,cqrate.indexOf("."));
}
/
conmap.put("type", "REGIONAL");
conmap.put("parentCode",getLoginUnit().getDistrict().substring(7,13));
areadiclist = tabDictionaryService.getList(conmap);
base_allsql+=" and SUBSTRING(u.district, 15, 21)=";
base_cqsql +=" and EXISTS(SELECT 1 from SYS_USE_UNIT u where u.id=l.SydwId and SUBSTRING(u.district, 15, 21)=";
}
for(TabDictionary areadic:areadiclist){
datax.add(areadic.getName());
datax_areacode.add(areadic.getCode());
String allsql=base_allsql+" '"+areadic.getCode()+"')";;
String cqsql=base_cqsql+" '"+areadic.getCode()+"')";
Map<Object,Object> allmap = tabDictionaryService.getBySql(allsql);
Map<Object,Object> cqmap = tabDictionaryService.getBySql(cqsql);
int allcount = allmap.get("COUNT")==null?0:Integer.parseInt(allmap.get("COUNT").toString());
int cqcount = cqmap.get("COUNT")==null?0:Integer.parseInt(cqmap.get("COUNT").toString());
if(allcount==0){
datay.add("0");dataall.add("0");datacq.add("0");
}else{
dataall.add(""+allcount);datacq.add(""+cqcount);
float rt= ((float)cqcount/(float)allcount)*100;
String rtstr=String.valueOf(rt);
if(rtstr.contains("."))rtstr=rtstr.substring(0,rtstr.indexOf("."));
datay.add(rtstr);
}
}
jsonMap.put("datax_areacode", datax_areacode);
jsonMap.put("datax", datax);
jsonMap.put("datay", datay);
jsonMap.put("dataall", dataall);
jsonMap.put("datacq", datacq);
jsonMap.put("all", all);
jsonMap.put("cq", cq);
jsonMap.put("cqrate", cqrate);
jsonMap.put("countArea", countArea);
jsonMap.put("countAreacode", countAreacode);
renderJson(JsonBuilder.build().success("成功！", null, jsonMap));
} catch (Exception e) {
// TODO: handle exception
logException(this.getClass(), Thread.currentThread().getStackTrace()[1].getMethodName(), e);
}
}
最后显示为
扫一扫
1338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
