347 lines
12 KiB
Plaintext
347 lines
12 KiB
Plaintext
<%@ page contentType="text/html;charset=UTF-8" %>
|
||
<%@ include file="/webpage/include/taglib.jsp"%>
|
||
<%@ include file="/webpage/include/echarts.jsp"%>
|
||
<html>
|
||
<head>
|
||
<title>执法信息</title>
|
||
<meta name="decorator" content="default"/>
|
||
<script src="${ctxStatic}/echarts-2.2.7/build/dist/echarts-all.js"></script>
|
||
<script type="text/javascript">
|
||
$(document).ready(function() {
|
||
laydate({
|
||
elem: '#begintime', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
|
||
event: 'focus' //响应事件。如果没有传入event，则按照默认的click
|
||
/* istime: true,
|
||
format: 'YYYY-MM-DD hh:mm:ss' //日期格式 */
|
||
});
|
||
laydate({
|
||
elem: '#endtime', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
|
||
event: 'focus' //响应事件。如果没有传入event，则按照默认的click
|
||
/* istime: true,
|
||
format: 'YYYY-MM-DD hh:mm:ss' //日期格式 */
|
||
});
|
||
});
|
||
|
||
function resetCus(){
|
||
//window.location.href="${ctx}/graphsanalysis/hisgraphs/hisgraphs";
|
||
}
|
||
|
||
/*
|
||
* 创建趋势分析折线图
|
||
*/
|
||
function createTrendLine(tagLongName,tagName,unit,type){
|
||
// 初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('line_trendals'));
|
||
var option = {
|
||
title: {
|
||
text: '执法信息分析',
|
||
subtext: '线性图'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: 'slider', //支持鼠标滚轮缩放
|
||
start: 0, //默认数据初始缩放范围为10%到90%
|
||
end: 100
|
||
},
|
||
{
|
||
type: 'inside', //支持单独的滑动条缩放
|
||
start: 0, //默认数据初始缩放范围为10%到90%
|
||
end: 100
|
||
}
|
||
],
|
||
legend: {
|
||
show:true,
|
||
data:[tagName,'药品','化妆品','保健品','医疗器械']
|
||
},
|
||
color:[
|
||
'#FF3333', //食品曲线颜色
|
||
'#53FF53', //药品曲线颜色
|
||
'#B15BFF', //化妆品图颜色
|
||
'#68CFE8', //保健品图颜色
|
||
'#FFDC35' //医疗器械曲线颜色
|
||
],
|
||
toolbox: {
|
||
show: true,
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
name: '时间',
|
||
splitNumber:24*3600,
|
||
scale:true,
|
||
splitNumber:10,
|
||
boundaryGap: false,
|
||
data: []
|
||
}],
|
||
yAxis : [
|
||
{
|
||
//yAxisIndex为0
|
||
type : 'value',
|
||
name : '合格率',
|
||
/* max: 120,
|
||
min: -40, */
|
||
axisLabel : {
|
||
formatter: '{value} '+unit
|
||
}
|
||
}
|
||
],
|
||
series : [
|
||
{
|
||
name:tagName,
|
||
type:'line',
|
||
symbol:'emptycircle', //设置折线图中表示每个坐标点的符号；emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
|
||
data:[]
|
||
},
|
||
{
|
||
name:"药品",
|
||
type:'line',
|
||
symbol:'emptycircle', //设置折线图中表示每个坐标点的符号；emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
|
||
data:[]
|
||
},
|
||
{
|
||
name:"化妆品",
|
||
type:'line',
|
||
symbol:'emptycircle', //设置折线图中表示每个坐标点的符号；emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
|
||
data:[]
|
||
},
|
||
{
|
||
name:"保健品",
|
||
type:'line',
|
||
symbol:'emptycircle', //设置折线图中表示每个坐标点的符号；emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
|
||
data:[]
|
||
},
|
||
{
|
||
name:"医疗器械",
|
||
type:'line',
|
||
symbol:'emptycircle', //设置折线图中表示每个坐标点的符号；emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
|
||
data:[]
|
||
}
|
||
]
|
||
};
|
||
|
||
var confirmRateList1 = [];
|
||
var confirmRateList2 = [];
|
||
var confirmRateList3 = [];
|
||
var confirmRateList4 = [];
|
||
var confirmRateList5 = [];
|
||
var yyyymmList1 = [];
|
||
var yyyymmList2 = [];
|
||
var yyyymmList3 = [];
|
||
var yyyymmList4 = [];
|
||
var yyyymmList5 = [];
|
||
var xBeginDate = $("input[id='begintime']").attr("value");
|
||
var xEndDate = $("input[id='endtime']").attr("value");
|
||
$.ajax({
|
||
type : "POST",
|
||
async : true,
|
||
url : "${ctx}/inspectionresult/inspRelt/getInspReltInfo",
|
||
data : {"bsSupervision":type,"begintime":xBeginDate,"endtime":xEndDate},
|
||
dataType : "json",
|
||
success : function(map) {
|
||
var ItemY1=function(){
|
||
return{
|
||
name:tagName,
|
||
type:'line',
|
||
symbol:'emptycircle',
|
||
data:[]
|
||
}
|
||
};
|
||
var ItemY2=function(){
|
||
return{
|
||
name:'药品',
|
||
type:'line',
|
||
symbol:'emptycircle',
|
||
data:[]
|
||
}
|
||
};
|
||
var ItemY3=function(){
|
||
return{
|
||
name:'化妆品',
|
||
type:'line',
|
||
symbol:'emptycircle',
|
||
data:[]
|
||
}
|
||
};
|
||
var ItemY4=function(){
|
||
return{
|
||
name:'保健品',
|
||
type:'line',
|
||
symbol:'emptycircle',
|
||
data:[]
|
||
}
|
||
};
|
||
var ItemY5=function(){
|
||
return{
|
||
name:'医疗器械',
|
||
type:'line',
|
||
symbol:'emptycircle',
|
||
data:[]
|
||
}
|
||
};
|
||
confirmRateList1 = map.confirmRateList1;
|
||
confirmRateList2 = map.confirmRateList2;
|
||
confirmRateList3 = map.confirmRateList3;
|
||
confirmRateList4 = map.confirmRateList4;
|
||
confirmRateList5 = map.confirmRateList5;
|
||
var series = [];
|
||
var itemY1 = new ItemY1();
|
||
itemY1.data=confirmRateList1;
|
||
series.push(itemY1);
|
||
|
||
var itemY2 = new ItemY2();
|
||
itemY2.data=confirmRateList2;
|
||
series.push(itemY2);
|
||
|
||
var itemY3 = new ItemY3();
|
||
itemY3.data=confirmRateList3;
|
||
series.push(itemY3);
|
||
|
||
var itemY4 = new ItemY4();
|
||
itemY4.data=confirmRateList4;
|
||
series.push(itemY4);
|
||
|
||
var itemY5 = new ItemY5();
|
||
itemY5.data=confirmRateList5;
|
||
series.push(itemY5);
|
||
/* itemY.data=function(){
|
||
var list = [];
|
||
if(confirmRateList1!=null){
|
||
for(var i=0;i<confirmRateList1.length;i++){
|
||
var tagInfo= confirmRateList1[i];
|
||
list.push(tagInfo);
|
||
}
|
||
}
|
||
return list;
|
||
}(); */
|
||
/* series.push(itemY); */
|
||
option.series = series;
|
||
|
||
/*x轴数据做成 start*/
|
||
yyyymmList1 = map.yyyymmList1;
|
||
yyyymmList2 = map.yyyymmList2;
|
||
yyyymmList3 = map.yyyymmList3;
|
||
yyyymmList4 = map.yyyymmList4;
|
||
yyyymmList5 = map.yyyymmList5;
|
||
var xAxisData = [];
|
||
|
||
if(yyyymmList1!=null){
|
||
for(var i=0;i<yyyymmList1.length;i++){
|
||
var d = yyyymmList1[i];
|
||
xAxisData.push(d);
|
||
}
|
||
}
|
||
xAxisData.push($("#endtime").val().substr(0,7));
|
||
|
||
var ItemX=function(){
|
||
return{
|
||
type: 'category',
|
||
name: '时间',
|
||
splitNumber:24*3600,
|
||
scale:true,
|
||
splitNumber:xAxisData.length,
|
||
boundaryGap: false,
|
||
data: xAxisData
|
||
}
|
||
};
|
||
var itemX = new ItemX();
|
||
var xAxis = [];
|
||
xAxis.push(itemX);
|
||
option.xAxis = xAxis;
|
||
/*x轴数据做成 end*/
|
||
if (option && typeof option === "object") {
|
||
myChart.setOption(option,true); //载入图表
|
||
}
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
</head>
|
||
<body class="gray-bg">
|
||
<div class="wrapper wrapper-content">
|
||
<div class="ibox">
|
||
<div class="ibox-title">
|
||
<h5>执法信息分析 </h5>
|
||
</div>
|
||
|
||
<div class="ibox-content">
|
||
<sys:message content="${message}"/>
|
||
<!--查询条件-->
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<form:form id="searchForm" modelAttribute="inspRelt" action="${ctx}/inspectionresult/inspRelt/inspInfo" method="post" class="form-inline">
|
||
<div class="form-group">
|
||
<span>开始时间：</span>
|
||
<form:input path="begintime" maxlength="20" class="laydate-icon form-control layer-date input-sm" />
|
||
<span>结束时间：</span>
|
||
<form:input path="endtime" maxlength="20" class="laydate-icon form-control layer-date input-sm" />
|
||
</div>
|
||
</form:form>
|
||
<br/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 工具栏 -->
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<div class="pull-right">
|
||
<button class="btn btn-primary btn-rounded btn-outline btn-sm " onclick="search()" ><i class="fa fa-search"></i> 查询</button>
|
||
<button class="btn btn-primary btn-rounded btn-outline btn-sm " onclick="resetCus()" ><i class="fa fa-refresh"></i> 重置</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<%@ include file="/webpage/include/echarts.jsp"%>
|
||
<table>
|
||
<tr>
|
||
<td><div id="line_trendals" class="main000" style="width:750px;"></div></td>
|
||
<td><div id="line_trendals2" class="main000" style="width:750px;"></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div id="line_trendals3" class="main000" style="width:750px;"></div></td>
|
||
<td><div id="line_trendals4" class="main000" style="width:750px;"></div></td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script type="text/javascript">
|
||
/*页面初始化处理*/
|
||
/*将当前日期转换成带时分秒格式时间*/
|
||
function timeStamp2String(time,n){
|
||
var datetime = new Date();
|
||
datetime.setTime(time);
|
||
datetime.setDate(datetime.getDate()+n);
|
||
var year = datetime.getFullYear();
|
||
var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
|
||
var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
|
||
/* var hour = datetime.getHours()< 10 ? "0" + datetime.getHours() : datetime.getHours();
|
||
var minute = datetime.getMinutes()< 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
|
||
var second = datetime.getSeconds()< 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
|
||
return year + "-" + month + "-" + date+" "+hour+":"+minute+":"+second; */
|
||
return year + "-" + month + "-" + date;
|
||
}
|
||
|
||
function time2DtStr(time,n){
|
||
var datetime = new Date();
|
||
datetime.setTime(time);
|
||
datetime.setDate(datetime.getDate()+n);
|
||
var year = datetime.getFullYear();
|
||
var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
|
||
return year + "-" + month;
|
||
}
|
||
|
||
if($("#begintime").val()=="" && $("#endtime").val()==""){
|
||
//当前时间前7天
|
||
$("#begintime").val(timeStamp2String(new Date(),-7));
|
||
//当前时间
|
||
$("#endtime").val(timeStamp2String(new Date(),0));
|
||
}
|
||
//描画折线图
|
||
createTrendLine("666666666","食品","%","1");
|
||
</script>
|
||
</body>
|
||
</html> |