|
|
@@ -0,0 +1,529 @@
|
|
|
+<!DOCTYPE HTML>
|
|
|
+<html xmlns:th="http://www.thymeleaf.org"
|
|
|
+ xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
|
+ layout:decorate="~{admin/common/common}">
|
|
|
+<head>
|
|
|
+ <title>产业供地预审</title>
|
|
|
+
|
|
|
+ <style>
|
|
|
+ #apply_container {
|
|
|
+ height: 400px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #result_container {
|
|
|
+ height: 400px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .online-box {
|
|
|
+ border: 1px solid #3f8fd5;
|
|
|
+ margin: 16px 10px;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ margin: 10px 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container-title {
|
|
|
+ text-align: left;
|
|
|
+ font-size: large;
|
|
|
+ font-weight: 600;
|
|
|
+ float: left;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container-option {
|
|
|
+ text-align: left;
|
|
|
+ float: right;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .option-tips {
|
|
|
+ font-size: 12px;
|
|
|
+ margin: 3px 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .option-option-name {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .option-option-select select {
|
|
|
+ min-width: 80px;
|
|
|
+ min-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-container {
|
|
|
+ margin: 10px 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-container table th {
|
|
|
+ text-align: left;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #534242;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body layout:fragment="content">
|
|
|
+
|
|
|
+<div class="page-container">
|
|
|
+
|
|
|
+ <div class="clearfix width-row">
|
|
|
+ <div class="online-box">
|
|
|
+ <div class="header-container">
|
|
|
+ <div class="container-title">项目来源统计</div>
|
|
|
+ <div class="container-option">
|
|
|
+ <div class="option-option">
|
|
|
+ <span class="option-option-name">
|
|
|
+ 年份:
|
|
|
+ </span>
|
|
|
+ <span class="option-option-select">
|
|
|
+ <select th:name="projectYearList" id="projectYearList"
|
|
|
+ onChange="changeProjectYear()">
|
|
|
+ <option value="">所有</option>
|
|
|
+ <option value="" th:each="item : ${years}"
|
|
|
+ th:text="${item}">
|
|
|
+ </option>
|
|
|
+ </select>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="table-container">
|
|
|
+ <table>
|
|
|
+ <tr id="projectNumTh">
|
|
|
+ <th>项目来源</th>
|
|
|
+ </tr>
|
|
|
+ <tr id="projectNumTd">
|
|
|
+ <td>数量</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 月度单据对比统计-->
|
|
|
+ <div class="clearfix width-row">
|
|
|
+ <div class="online-box">
|
|
|
+ <div class="header-container">
|
|
|
+ <div class="container-title">月度单据对比统计</div>
|
|
|
+ <div class="container-option">
|
|
|
+ <div class="option-option">
|
|
|
+ <span class="option-option-name">
|
|
|
+ 年份:
|
|
|
+ </span>
|
|
|
+ <span class="option-option-select">
|
|
|
+ <span class="option-option-select">
|
|
|
+ <select th:name="mounthYearList" id="mounthYearList"
|
|
|
+ onChange="changeMountProjectYear()">
|
|
|
+ <option value="" th:each="item : ${years}" th:selected="${currentYear} eq ${item}"
|
|
|
+ th:text="${item}">
|
|
|
+ </option>
|
|
|
+ </select>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chart_data">
|
|
|
+ <div id="mouth_data_container"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 项目阶段状态统计-->
|
|
|
+ <div class="clearfix width-row">
|
|
|
+ <div class="online-box">
|
|
|
+ <div class="header-container">
|
|
|
+ <div class="container-title">项目阶段状态统计</div>
|
|
|
+ <div class="container-option">
|
|
|
+ <div class="option-option">
|
|
|
+ <span class="option-option-name">
|
|
|
+ 年份:
|
|
|
+ </span>
|
|
|
+ <span class="option-option-select">
|
|
|
+ <select th:name="stageYearList" id="stageYearList"
|
|
|
+ onChange="changeStageStatusYear()">
|
|
|
+ <option value="" th:each="item : ${years}" th:selected="${currentYear} eq ${item}"
|
|
|
+ th:text="${item}">
|
|
|
+ </option>
|
|
|
+ </select>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-container">
|
|
|
+ <div class="clearfix width-row">
|
|
|
+ <div class="chart_data">
|
|
|
+ <div id="stage_container"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="clearfix width-row">
|
|
|
+ <div class="width-half">
|
|
|
+ <div class="chart_data">
|
|
|
+ <div id="commerce_status_container"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="width-half">
|
|
|
+ <div class="chart_data">
|
|
|
+ <div id="status_container"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+<script type="text/javascript" th:src="@{/js/lib/highcharts/highcharts.js}"></script>
|
|
|
+<script type="text/javascript" th:src="@{/js/lib/highcharts/exporting.js}"></script>
|
|
|
+<script type="text/javascript" th:src="@{/js/lib/highcharts/highcharts-zh_CN.js}"></script>
|
|
|
+<style>
|
|
|
+ a.cur {
|
|
|
+ background: #0a6999;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<script th:inline="javascript">
|
|
|
+
|
|
|
+
|
|
|
+ $(function () {
|
|
|
+
|
|
|
+ $(".highlight a").click(function () {
|
|
|
+ $(this).addClass("cur").parent().siblings().find("a").removeClass("cur")
|
|
|
+ });
|
|
|
+ applyMouthSummary();
|
|
|
+ // applyResultRate();
|
|
|
+ applyStageStatusRate();
|
|
|
+ streetCompare();
|
|
|
+ });
|
|
|
+
|
|
|
+ //初始化柱形图
|
|
|
+ var initColumn = {
|
|
|
+ chart: {
|
|
|
+ type: 'column'
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: '月度单据对比统计'
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ crosshair: true,
|
|
|
+ labels: {
|
|
|
+ enabled: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ min: 0,
|
|
|
+ allowDecimals: false,
|
|
|
+ title: {
|
|
|
+ text: '',
|
|
|
+ align: 'high'
|
|
|
+ },
|
|
|
+ labels: {
|
|
|
+ overflow: 'justify'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ formatter: function () {
|
|
|
+ return '<span style="font-size: 12px">' + this.series.name + ':' + this.y + '个</span>';//这里随便你返回什么东西吧
|
|
|
+ }
|
|
|
+ },
|
|
|
+ plotOptions: {
|
|
|
+ column: {
|
|
|
+ pointPadding: 0.2,
|
|
|
+ borderWidth: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: []
|
|
|
+ };
|
|
|
+
|
|
|
+ //初始化饼图
|
|
|
+ var initPieStage = {
|
|
|
+ chart: {
|
|
|
+ plotBackgroundColor: null,
|
|
|
+ plotBorderWidth: null,
|
|
|
+ plotShadow: false
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: '项目阶段统计'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ headerFormat: '',
|
|
|
+ pointFormat: '{point.name}: <b>{point.y}</b> '
|
|
|
+ },
|
|
|
+ plotOptions: {
|
|
|
+ pie: {
|
|
|
+ allowPointSelect: true,
|
|
|
+ cursor: 'pointer',
|
|
|
+ dataLabels: {
|
|
|
+ enabled: true,
|
|
|
+ // 通过 format 或 formatter 来格式化数据标签显示
|
|
|
+ //format: '值: {point.y} 占比 {point.percentage} %',
|
|
|
+ formatter: function () {
|
|
|
+ //this 为当前的点（扇区）对象，可以通过 console.log(this) 来查看详细信息
|
|
|
+ return '<span"> ' + this.point.name + '：' + this.y + '</span>';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showInLegend: true // 显示在图例中
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: ''
|
|
|
+ }]
|
|
|
+ };
|
|
|
+
|
|
|
+ //项目状态统计-项目预审阶段
|
|
|
+ var initPieCommerceStatus = {
|
|
|
+ chart: {
|
|
|
+ plotBackgroundColor: null,
|
|
|
+ plotBorderWidth: null,
|
|
|
+ plotShadow: false
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: '项目状态统计-项目预审阶段'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ headerFormat: '',
|
|
|
+ pointFormat: '{point.name}: <b>{point.y}</b> '
|
|
|
+ },
|
|
|
+ plotOptions: {
|
|
|
+ pie: {
|
|
|
+ allowPointSelect: true,
|
|
|
+ cursor: 'pointer',
|
|
|
+ dataLabels: {
|
|
|
+ enabled: true,
|
|
|
+ // 通过 format 或 formatter 来格式化数据标签显示
|
|
|
+ //format: '值: {point.y} 占比 {point.percentage} %',
|
|
|
+ formatter: function () {
|
|
|
+ //this 为当前的点（扇区）对象，可以通过 console.log(this) 来查看详细信息
|
|
|
+ return '<span"> ' + this.point.name + '：' + this.y + '</span>';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showInLegend: true // 显示在图例中
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: ''
|
|
|
+ }]
|
|
|
+ };
|
|
|
+
|
|
|
+ var initPieStatus = {
|
|
|
+ chart: {
|
|
|
+ plotBackgroundColor: null,
|
|
|
+ plotBorderWidth: null,
|
|
|
+ plotShadow: false
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: '项目状态统计-项目供地阶段'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ headerFormat: '',
|
|
|
+ pointFormat: '{point.name}: <b>{point.y}</b> '
|
|
|
+ },
|
|
|
+ plotOptions: {
|
|
|
+ pie: {
|
|
|
+ allowPointSelect: true,
|
|
|
+ cursor: 'pointer',
|
|
|
+ dataLabels: {
|
|
|
+ enabled: true,
|
|
|
+ // 通过 format 或 formatter 来格式化数据标签显示
|
|
|
+ //format: '值: {point.y} 占比 {point.percentage} %',
|
|
|
+ formatter: function () {
|
|
|
+ //this 为当前的点（扇区）对象，可以通过 console.log(this) 来查看详细信息
|
|
|
+ return '<span"> ' + this.point.name + '：' + this.y + '</span>';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showInLegend: true // 显示在图例中
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: ''
|
|
|
+ }]
|
|
|
+ };
|
|
|
+
|
|
|
+ //产业用地月度单据对比统计
|
|
|
+ function applyMouthSummary() {
|
|
|
+ var year = $("#mounthYearList").find("option:selected").text();
|
|
|
+ if (year =="") year = "2022";
|
|
|
+ $.ajax({
|
|
|
+ type: "get",
|
|
|
+ dataType: "json",
|
|
|
+ data: {},
|
|
|
+ url: pagePath + "/statistics/getInstrialLandApplyMouthlyDataByYear?year="+year,
|
|
|
+ success: function (result) {
|
|
|
+ console.log(result);
|
|
|
+ if (result.success) {
|
|
|
+ var chart = Highcharts.chart('mouth_data_container', initColumn);
|
|
|
+ var value = result.obj;
|
|
|
+ for(var j=0;j < value.length;j++){
|
|
|
+ var data = [];
|
|
|
+ data.push(value[j].overallNum);
|
|
|
+ console.log(data);
|
|
|
+ chart.addSeries({
|
|
|
+ name: value[j].type,
|
|
|
+ data: data
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ errorMessage(result.message);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function () {
|
|
|
+ errorMessage('系统错误!');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 产业用地项目阶段统计占比
|
|
|
+ function applyStageStatusRate() {
|
|
|
+ var year = $("#stageYearList").find("option:selected").text();
|
|
|
+ if (year =="") year = "2022";
|
|
|
+
|
|
|
+ $.ajax({
|
|
|
+ type: "get",
|
|
|
+ dataType: "json",
|
|
|
+ data: {},
|
|
|
+ url: pagePath + "/statistics/getInstrialLandApplyStageSummaryByYear?year=" + year,
|
|
|
+ success: function (result) {
|
|
|
+ console.log(result);
|
|
|
+ if (result.success) {
|
|
|
+ var value = result.obj;
|
|
|
+ var data = [];
|
|
|
+ for (var j = 0; j < value.length; j++) {
|
|
|
+ data.push({"name": value[j].type, "y": value[j].overallNum});
|
|
|
+ }
|
|
|
+ var chart = new Highcharts.Chart("stage_container", initPieStage);
|
|
|
+ var subtitle = {
|
|
|
+ text: "<div style='height: 24px'></div>",
|
|
|
+ useHTML: true
|
|
|
+ };
|
|
|
+ chart.setSubtitle(subtitle);
|
|
|
+ chart.series[0].setData(data);
|
|
|
+ } else {
|
|
|
+ errorMessage(result.message);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function () {
|
|
|
+ errorMessage('系统错误!');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 项目预审阶段
|
|
|
+ $.ajax({
|
|
|
+ type: "get",
|
|
|
+ dataType: "json",
|
|
|
+ data: {},
|
|
|
+ url: pagePath + "/statistics/getInstrialLandApplyStatusCommerceSummaryByYear?year=" + year,
|
|
|
+ success: function (result) {
|
|
|
+ console.log(result);
|
|
|
+ if (result.success) {
|
|
|
+ var value = result.obj;
|
|
|
+ var data = [];
|
|
|
+ for (var j = 0; j < value.length; j++) {
|
|
|
+ data.push({"name": value[j].type, "y": value[j].overallNum});
|
|
|
+ }
|
|
|
+ var chart = new Highcharts.Chart("commerce_status_container", initPieCommerceStatus);
|
|
|
+ var subtitle = {
|
|
|
+ text: "<div style='height: 24px'></div>",
|
|
|
+ useHTML: true
|
|
|
+ };
|
|
|
+ chart.setSubtitle(subtitle);
|
|
|
+ chart.series[0].setData(data);
|
|
|
+ } else {
|
|
|
+ errorMessage(result.message);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function () {
|
|
|
+ errorMessage('系统错误!');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 项目供地阶段
|
|
|
+ $.ajax({
|
|
|
+ type: "get",
|
|
|
+ dataType: "json",
|
|
|
+ data: {},
|
|
|
+ url: pagePath + "/statistics/getInstrialLandApplyStatusSummaryByYear?year=" + year,
|
|
|
+ success: function (result) {
|
|
|
+ console.log(result);
|
|
|
+ if (result.success) {
|
|
|
+ var value = result.obj;
|
|
|
+ var data = [];
|
|
|
+ for (var j = 0; j < value.length; j++) {
|
|
|
+ data.push({"name": value[j].type, "y": value[j].overallNum});
|
|
|
+ }
|
|
|
+ var chart = new Highcharts.Chart("status_container", initPieStatus);
|
|
|
+ var subtitle = {
|
|
|
+ text: "<div style='height: 24px'></div>",
|
|
|
+ useHTML: true
|
|
|
+ };
|
|
|
+ chart.setSubtitle(subtitle);
|
|
|
+ chart.series[0].setData(data);
|
|
|
+ } else {
|
|
|
+ errorMessage(result.message);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function () {
|
|
|
+ errorMessage('系统错误!');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ //各单位处理单据对比
|
|
|
+ function streetCompare() {
|
|
|
+ var year = $("#projectYearList").find("option:selected").text();
|
|
|
+ if (year =="所有") year = "";
|
|
|
+ $.ajax({
|
|
|
+ type: "get",
|
|
|
+ dataType: "json",
|
|
|
+ data: {},
|
|
|
+ url: pagePath + "/statistics/getIndustrialLandSupplyProjectNum?year=" + year,
|
|
|
+ success: function (result) {
|
|
|
+ console.log(result);
|
|
|
+ if (result.success) {
|
|
|
+ var value = result.obj;
|
|
|
+ $tr = $("#projectNumTh");
|
|
|
+ $body = $("#projectNumTd");
|
|
|
+ $tr.html("<th>项目来源</th>");
|
|
|
+ $body.html(" <td>数量</td>");
|
|
|
+ for (var j = 0; j < value.length; j++) {
|
|
|
+ console.log(value[j])
|
|
|
+ $tr.append("<th>" + value[j].streetName + "</th>");
|
|
|
+ $body.append("<td>" + value[j].projectNum + "</td>");
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ errorMessage(result.message);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function () {
|
|
|
+ errorMessage('系统错误!');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function changeProjectYear() {
|
|
|
+ streetCompare();
|
|
|
+ }
|
|
|
+
|
|
|
+ function changeMountProjectYear() {
|
|
|
+ applyMouthSummary();
|
|
|
+ }
|
|
|
+
|
|
|
+ function changeStageStatusYear() {
|
|
|
+ applyStageStatusRate();
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
