|
|
|
@ -3,48 +3,180 @@ |
|
|
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> |
|
|
|
<head> |
|
|
|
<th:block th:include="zdxtInclude :: header('图表分析')"/> |
|
|
|
<link type="text/css" href="/css/stat.css" rel="stylesheet" /> |
|
|
|
<link type="text/css" href="/css/stat.css" rel="stylesheet"/> |
|
|
|
</head> |
|
|
|
|
|
|
|
<body> |
|
|
|
<div class="statwrap"> |
|
|
|
<h1 class="headtit">深圳市各类行政检查实施情况分析</h1> |
|
|
|
<div class="seltime"><i class="icsty"></i><span><select name="year"> |
|
|
|
<option>2024</option> |
|
|
|
<option>2023</option> |
|
|
|
<option>2022</option> |
|
|
|
</select>年度</span> |
|
|
|
<span><select name="quarter"> |
|
|
|
<option>2024-01</option> |
|
|
|
</select>季度</span> |
|
|
|
<span><select name="month"> |
|
|
|
<option>2024-01</option> |
|
|
|
<option>2024-02</option> |
|
|
|
<option>2024-03</option> |
|
|
|
</select>月度</span> |
|
|
|
</div> |
|
|
|
<div class="statit"><span id="one1" class="actit" onclick="setTab('one',1,4)">案件数量</span><span id="one2" onclick="setTab('one',2,4)">执法人员</span><span id="one3" onclick="setTab('one',3,4)">检查事项</span><span id="one4" onclick="setTab('one',4,4)" class="hover">企业类型</span></div> |
|
|
|
<div id="con_one_1" class="tab_item" style="display: block;"> |
|
|
|
<div class="chartbox" id="echartRing"></div> |
|
|
|
<div class="chartbox" id="echartLine"></div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div id="con_one_2" class="tab_item"> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div id="con_one_3" class="tab_item"> |
|
|
|
</div> |
|
|
|
<h1 class="headtit">深圳市各类行政检查实施情况分析</h1> |
|
|
|
<div class="seltime"> |
|
|
|
<i class="icsty"></i> |
|
|
|
<span><select id="qorm" name="qorm" onchange="selectDate()"> |
|
|
|
<option value="q">季度</option> |
|
|
|
<option value="m">月度</option> |
|
|
|
</select>年度</span> |
|
|
|
<span><select id="year" name="year" onchange="selectDate()"> |
|
|
|
<option value="2024">2024</option> |
|
|
|
<option value="2023">2023</option> |
|
|
|
<option value="2022">2022</option> |
|
|
|
</select>年度</span> |
|
|
|
<span><select id="quarter" name="quarter" onchange="selectDate()"> |
|
|
|
<option value="q1">1季度</option> |
|
|
|
<option value="q2">2季度</option> |
|
|
|
<option value="q3">3季度</option> |
|
|
|
<option value="q4">4季度</option> |
|
|
|
</select>季度</span> |
|
|
|
<span><select id="month" name="month" onchange="selectDate()"> |
|
|
|
<option value="01">1</option> |
|
|
|
<option value="02">2</option> |
|
|
|
<option value="03">3</option> |
|
|
|
<option value="04">4</option> |
|
|
|
<option value="05">5</option> |
|
|
|
<option value="06">6</option> |
|
|
|
<option value="07">7</option> |
|
|
|
<option value="08">8</option> |
|
|
|
<option value="09">9</option> |
|
|
|
<option value="10">10</option> |
|
|
|
<option value="11">11</option> |
|
|
|
<option value="12">12</option> |
|
|
|
</select>月度</span> |
|
|
|
</div> |
|
|
|
<div class="statit"> |
|
|
|
<span id="one1" class="actit" onclick="setTab('one',1,4)">案件数量</span> |
|
|
|
<span id="one2" onclick="setTab('one',2,4)">执法人员</span> |
|
|
|
<span id="one3" onclick="setTab('one',3,4)">检查事项</span> |
|
|
|
<span id="one4" onclick="setTab('one',4,4)" class="hover">企业类型</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div id="con_one_4" class="tab_item"> |
|
|
|
</div> |
|
|
|
<div id="con_one_1" class="tab_item" style="display: block;"> |
|
|
|
<div class="chartbox" id="echartRing"></div> |
|
|
|
<div class="chartbox" id="echartLine"></div> |
|
|
|
</div> |
|
|
|
<div id="con_one_2" class="tab_item"> |
|
|
|
<div style="float: left; margin: 2% 2%; width: 100%; height: 100%" id="barEnforcer"></div> |
|
|
|
</div> |
|
|
|
<div id="con_one_3" class="tab_item"> |
|
|
|
</div> |
|
|
|
<div id="con_one_4" class="tab_item"> |
|
|
|
<div style="float: left; margin: 2% 2%; width: 100%; height: 100%" id="pieEnterprise"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<th:block th:include="zdxtInclude :: footer"/> |
|
|
|
<script type="text/javascript" src="/js/echarts.min.js" ></script> |
|
|
|
<script type="text/javascript" src="/js/charts-analy.js" ></script> |
|
|
|
<script type="text/javascript" src="/js/echarts.min.js"></script> |
|
|
|
<script type="text/javascript" src="/js/charts-analy.js"></script> |
|
|
|
<script th:inline="javascript"> |
|
|
|
var dataList = [[${statisticalVos}]] |
|
|
|
var prefix = ctx + "statistical"; |
|
|
|
|
|
|
|
window.onload = function () { |
|
|
|
selectDate(); |
|
|
|
} |
|
|
|
|
|
|
|
function setTab(name, cursel, n) { |
|
|
|
for (i = 1; i <= n; i++) { |
|
|
|
var menu = document.getElementById(name + i); |
|
|
|
var con = document.getElementById("con_" + name + "_" + i); |
|
|
|
menu.className = i == cursel ? "actit" : ""; |
|
|
|
con.style.display = i == cursel ? "block" : "none"; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function queryCaseAnalysis(qorm, year, quarter, month, month) { |
|
|
|
$.ajax({ |
|
|
|
url: prefix + '/caseAnalysis', //后台url |
|
|
|
data: { |
|
|
|
"qorm": qorm, |
|
|
|
"year": year, |
|
|
|
"quarter": quarter, |
|
|
|
"month": month, |
|
|
|
}, |
|
|
|
type: "GET", |
|
|
|
dataType: 'json', |
|
|
|
success: function (data) { //成功,回调函数 |
|
|
|
caseAnalysis(data.data) |
|
|
|
}, |
|
|
|
error: function (er) { //失败,回调函数 |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
function queryEnforcerAnalysis(qorm, year, quarter, month, month) { |
|
|
|
$.ajax({ |
|
|
|
url: prefix + '/enforcerAnalysis', //后台url |
|
|
|
data: { |
|
|
|
"qorm": qorm, |
|
|
|
"year": year, |
|
|
|
"quarter": quarter, |
|
|
|
"month": month, |
|
|
|
}, |
|
|
|
type: "GET", |
|
|
|
dataType: 'json', |
|
|
|
success: function (data) { //成功,回调函数 |
|
|
|
var names = []; |
|
|
|
var values = []; |
|
|
|
for (var i=0; i<data.data.length; i++) { |
|
|
|
names.push(data.data[i].lawEnforcer); |
|
|
|
values.push(data.data[i].total); |
|
|
|
} |
|
|
|
bar_across("barEnforcer", names, values); |
|
|
|
}, |
|
|
|
error: function (er) { //失败,回调函数 |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
function queryEnterpriseAnalysis(qorm, year, quarter, month, month) { |
|
|
|
$.ajax({ |
|
|
|
url: prefix + '/enterpriseAnalysis', //后台url |
|
|
|
data: { |
|
|
|
"qorm": qorm, |
|
|
|
"year": year, |
|
|
|
"quarter": quarter, |
|
|
|
"month": month, |
|
|
|
}, |
|
|
|
type: "GET", |
|
|
|
dataType: 'json', |
|
|
|
success: function (data) { //成功,回调函数 |
|
|
|
pie_rose("pieEnterprise", [ |
|
|
|
{value:10, name:'rose1'}, |
|
|
|
{value:5, name:'rose2'}, |
|
|
|
{value:15, name:'rose3'}, |
|
|
|
{value:25, name:'rose4'}, |
|
|
|
{value:20, name:'rose5'}, |
|
|
|
{value:35, name:'rose6'}, |
|
|
|
{value:30, name:'rose7'}, |
|
|
|
{value:40, name:'rose8'} |
|
|
|
]); |
|
|
|
console.log("------") |
|
|
|
console.log(data); |
|
|
|
console.log("------") |
|
|
|
var datas = []; |
|
|
|
for (var i=0; i<data.data.length; i++) { |
|
|
|
datas.push({ |
|
|
|
value: data.data[i].total, |
|
|
|
name: data.data[i].lawEnforcement |
|
|
|
}); |
|
|
|
} |
|
|
|
pie_rose("pieEnterprise", datas); |
|
|
|
}, |
|
|
|
error: function (er) { //失败,回调函数 |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
function selectDate() { |
|
|
|
var qormElement = document.getElementById("qorm"); |
|
|
|
var qormValue = qormElement.options[qormElement.selectedIndex].value; |
|
|
|
var yearElement = document.getElementById("year"); |
|
|
|
var yearValue = yearElement.options[yearElement.selectedIndex].value; |
|
|
|
var quarterElement = document.getElementById("quarter"); |
|
|
|
var quarterValue = quarterElement.options[quarterElement.selectedIndex].value; |
|
|
|
var monthElement = document.getElementById("month"); |
|
|
|
var monthValue = monthElement.options[monthElement.selectedIndex].value; |
|
|
|
queryCaseAnalysis(qormValue, yearValue, quarterValue, monthValue); |
|
|
|
queryEnforcerAnalysis(qormValue, yearValue, quarterValue, monthValue); |
|
|
|
queryEnterpriseAnalysis(qormValue, yearValue, quarterValue, monthValue); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
function caseAnalysis(dataList) { |
|
|
|
console.log(dataList) |
|
|
|
var arr = []; |
|
|
|
var arrName = []; |
|
|
|
@ -74,14 +206,57 @@ |
|
|
|
echartUtil.initSchedule("echartLine"); |
|
|
|
} |
|
|
|
|
|
|
|
function setTab(name,cursel,n){ |
|
|
|
for(i=1;i<=n;i++){ |
|
|
|
var menu=document.getElementById(name+i); |
|
|
|
var con=document.getElementById("con_"+name+"_"+i); |
|
|
|
menu.className=i==cursel?"actit":""; |
|
|
|
con.style.display=i==cursel?"block":"none"; |
|
|
|
function bar_across(targetId, names, values) { |
|
|
|
var myChart = echarts.init(document.getElementById(targetId)); |
|
|
|
var option = { |
|
|
|
tooltip : { trigger: 'axis' }, |
|
|
|
xAxis : [{ type : 'value', }], |
|
|
|
yAxis : [{ |
|
|
|
type : 'category', |
|
|
|
data : names, |
|
|
|
}], |
|
|
|
series : [{ |
|
|
|
type:'bar', |
|
|
|
data: values, |
|
|
|
itemStyle: { //图形样式 |
|
|
|
normal: { //normal 图形在默认状态下的样式; |
|
|
|
barBorderRadius: 10, //柱条圆角半径,单位px. |
|
|
|
} |
|
|
|
}, |
|
|
|
}] |
|
|
|
}; |
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。 |
|
|
|
myChart.setOption(option); |
|
|
|
myChart.resize(); |
|
|
|
window.addEventListener('resize', () => { myChart.resize(); }); |
|
|
|
} |
|
|
|
|
|
|
|
function pie_rose(targetId, datas) { |
|
|
|
var myChart = echarts.init(document.getElementById(targetId)); |
|
|
|
option = { |
|
|
|
tooltip : { |
|
|
|
trigger: 'item', |
|
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)" |
|
|
|
}, |
|
|
|
toolbox: { |
|
|
|
show : true, |
|
|
|
}, |
|
|
|
calculable : true, |
|
|
|
series : [ |
|
|
|
{ |
|
|
|
name:'面积模式', |
|
|
|
type:'pie', |
|
|
|
roseType : 'area', |
|
|
|
data: datas |
|
|
|
} |
|
|
|
] |
|
|
|
}; |
|
|
|
// 使用刚指定的配置项和数据显示图表。 |
|
|
|
myChart.setOption(option); |
|
|
|
myChart.resize(); |
|
|
|
window.addEventListener('resize', () => { myChart.resize(); }); |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
</body> |
|
|
|
</html> |
|
|
|
|