|
|
@@ -87,7 +87,7 @@
|
|
|
}
|
|
|
|
|
|
.chartContent .date_line > i {
|
|
|
- z-index:5;
|
|
|
+ z-index: 5;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
padding: 10px;
|
|
|
@@ -103,6 +103,7 @@
|
|
|
.chartContent .date_line .next_month {
|
|
|
right: -8px;
|
|
|
}
|
|
|
+
|
|
|
.chartContent .date_line .date_tab_list {
|
|
|
border-bottom: 1px solid #e2e3e4;
|
|
|
width: 6000px;
|
|
|
@@ -110,10 +111,11 @@
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
}
|
|
|
+
|
|
|
.chartContent .date_line .date_tab_list .date_tab_item {
|
|
|
display: inline-block;
|
|
|
float: left;
|
|
|
- width:58px;
|
|
|
+ width: 58px;
|
|
|
text-align: center;
|
|
|
margin-left: 15px;
|
|
|
margin-right: 15px;
|
|
|
@@ -124,9 +126,11 @@
|
|
|
cursor: pointer;
|
|
|
margin-bottom: -1px;
|
|
|
}
|
|
|
+
|
|
|
.chartContent .date_line .date_tab_list .date_tab_item:first-child {
|
|
|
margin-left: 30px;
|
|
|
}
|
|
|
+
|
|
|
.chartContent .date_line .date_tab_list .active_month {
|
|
|
background-color: #ffffff;
|
|
|
color: #00a0e9;
|
|
|
@@ -204,26 +208,20 @@
|
|
|
<div class="date_line">
|
|
|
<i class="pre_month Hui-iconfont Hui-iconfont-slider-left"></i>
|
|
|
<i class="next_month Hui-iconfont Hui-iconfont-slider-right"></i>
|
|
|
- <ul class="date_tab_list clearfix">
|
|
|
- <li class="active_month date_tab_item">2019-05</li>
|
|
|
- <li class="date_tab_item">2019-06</li>
|
|
|
- <li class="date_tab_item">2019-07</li>
|
|
|
- <li class="date_tab_item">2019-06</li>
|
|
|
- <li class="date_tab_item">2019-07</li>
|
|
|
- <li class="date_tab_item">2019-06</li>
|
|
|
- <li class="date_tab_item">2019-07</li>
|
|
|
- <li class="date_tab_item">2019-06</li>
|
|
|
- <li class="date_tab_item">2019-07</li>
|
|
|
- <li class="date_tab_item">2019-06</li>
|
|
|
- <li class="date_tab_item">2019-07</li>
|
|
|
- <li class="date_tab_item">2019-06</li>
|
|
|
- <li class="date_tab_item">2019-07</li>
|
|
|
- <li class="date_tab_item">2019-07</li>
|
|
|
- <li class="date_tab_item">2019-07</li>
|
|
|
- <li class="date_tab_item">2019-07</li>
|
|
|
- <li class="date_tab_item">2019-07</li>
|
|
|
- <li class="date_tab_item">2019-07</li>
|
|
|
- <li class="date_tab_item">2019-07</li>
|
|
|
+ <ul class="date_tab_list clearfix" id="date_line">
|
|
|
+<!-- <li class="date_tab_item">2019-01</li>-->
|
|
|
+<!-- <li class="date_tab_item">2019-02</li>-->
|
|
|
+<!-- <li class="date_tab_item">2019-03</li>-->
|
|
|
+<!-- <li class="date_tab_item">2019-04</li>-->
|
|
|
+<!-- <li class="active_month date_tab_item">2019-05</li>-->
|
|
|
+<!-- <li class="date_tab_item">2019-06</li>-->
|
|
|
+<!-- <li class="date_tab_item">2019-07</li>-->
|
|
|
+<!-- <li class="date_tab_item">2019-08</li>-->
|
|
|
+<!-- <li class="date_tab_item">2019-09</li>-->
|
|
|
+<!-- <li class="date_tab_item">2019-11</li>-->
|
|
|
+<!-- <li class="date_tab_item">2019-12</li>-->
|
|
|
+<!-- <li class="date_tab_item">2020-01</li>-->
|
|
|
+<!-- <li class="date_tab_item">2020-02</li>-->
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div id="monthly_type_bar" style="width: 1200px; height: 400px"></div>
|
|
|
@@ -353,7 +351,7 @@
|
|
|
<script th:inline="javascript">
|
|
|
|
|
|
getApproveStatus("");
|
|
|
- getTypeStatistic("", "", "");
|
|
|
+ // getTypeStatistic("", "", "");
|
|
|
getMontylyApproveStatus();
|
|
|
getMontylyApproveStatistic();
|
|
|
getPlateStatistic();
|
|
|
@@ -399,7 +397,7 @@
|
|
|
//月度分类统计
|
|
|
function getTypeStatistic(streedId, startTime, endTime) {
|
|
|
$.ajax({
|
|
|
- url: pagePath + "/land_statistic/approve/type?street_id=" + streedId + "&start_time" + startTime + "&end_time" + endTime,
|
|
|
+ url: pagePath + "/land_statistic/approve/type?street_id=" + streedId + "&start_time=" + startTime + "&end_time=" + endTime,
|
|
|
type: "get",
|
|
|
dataType: "json",
|
|
|
data: {
|
|
|
@@ -437,7 +435,7 @@
|
|
|
},
|
|
|
success: function (result) {
|
|
|
if (result.success) {
|
|
|
- console.log(result.obj)
|
|
|
+ // console.log(result.obj)
|
|
|
var data = result.obj.data
|
|
|
var xAxisName = result.obj.xAxisName;
|
|
|
var legendData = new Array();
|
|
|
@@ -664,8 +662,8 @@
|
|
|
var date = new Date(), y = date.getFullYear(), m = date.getMonth();
|
|
|
var firstDay = new Date(y, m, 1);
|
|
|
var lastDay = new Date(y, m + 1, 0);
|
|
|
- console.log(firstDay.format('yyyy-MM-dd') + " 00:00:00")
|
|
|
- console.log(lastDay.format('yyyy-MM-dd') + " 23:59:59")
|
|
|
+ // console.log(firstDay.format('yyyy-MM-dd') + " 00:00:00")
|
|
|
+ // console.log(lastDay.format('yyyy-MM-dd') + " 23:59:59")
|
|
|
return dataArr;
|
|
|
}
|
|
|
|
|
|
@@ -675,7 +673,7 @@
|
|
|
var charts = echarts.init(document.getElementById('monthly_type_bar'));
|
|
|
|
|
|
charts.on('timelinechanged', function (timeLineIndex) {
|
|
|
- console.log(timeLineIndex.currentIndex)
|
|
|
+ // console.log(timeLineIndex.currentIndex)
|
|
|
});
|
|
|
|
|
|
// 指定图表的配置项和数据
|
|
|
@@ -810,7 +808,7 @@
|
|
|
}
|
|
|
|
|
|
$(document).on("click", ".liHead", function () {
|
|
|
- console.log("点击了", $(this).next().is(":hidden"))
|
|
|
+ // console.log("点击了", $(this).next().is(":hidden"))
|
|
|
if (!$(this).next().is(":hidden")) {
|
|
|
$(this).next().slideUp(200)
|
|
|
$(this).children(":first").children(":first").attr("class", "ifont-youx-copy-copy close")
|
|
|
@@ -821,66 +819,95 @@
|
|
|
|
|
|
})
|
|
|
|
|
|
- // 点击前一页
|
|
|
- $('.date_line .pre_month').click(function(){
|
|
|
- let offsetNum = $('.date_tab_list').position().left
|
|
|
- // console.log('父元素偏移量', Math.abs(offsetNum))
|
|
|
- if (Math.abs(offsetNum) > 0) {
|
|
|
- $('.date_line .pre_month').css('display', 'none')
|
|
|
- let offsetLeft = (offsetNum + 1170 + 'px')
|
|
|
- $(".date_tab_list").animate({left: offsetLeft}, 1000)
|
|
|
- setTimeout(function(){
|
|
|
- $('.date_line .pre_month').css('display', 'block')
|
|
|
- },1000)
|
|
|
- } else {
|
|
|
- console.log('已到头')
|
|
|
+ $(function () {
|
|
|
+ var dataArr = [];
|
|
|
+ var data = new Date();
|
|
|
+ var year = data.getFullYear();
|
|
|
+ data.setMonth(data.getMonth() + 1, 1) //获取到当前月份,设置月份
|
|
|
+ for (var i = 0; i < 24; i++) {
|
|
|
+ data.setMonth(data.getMonth() - 1); //每次循环一次 月份值减1
|
|
|
+ var m = data.getMonth() + 1;
|
|
|
+ m = m < 10 ? "0" + m : m;
|
|
|
+ dataArr.unshift(data.getFullYear() + "-" + (m));
|
|
|
}
|
|
|
- })
|
|
|
-
|
|
|
- // 点击后一页
|
|
|
- $('.date_line .next_month').click(function(){
|
|
|
- let offsetNum = $('.date_tab_list').position().left
|
|
|
- let childrenNum = $('.date_tab_list').children('.date_tab_item').length
|
|
|
- let maxOffset = (Math.ceil(childrenNum/9) - 1) * 1170
|
|
|
- // console.log('父元素偏移量', offsetNum)
|
|
|
- // console.log('子元素数量', childrenNum)
|
|
|
- // console.log('最大偏移量', maxOffset)
|
|
|
- if (Math.abs(offsetNum) < maxOffset) {
|
|
|
- $('.date_line .next_month').css('display', 'none')
|
|
|
- let offsetLeft = (offsetNum - 1170 + 'px')
|
|
|
- $(".date_tab_list").animate({left: offsetLeft}, 1000)
|
|
|
- setTimeout(function(){
|
|
|
- $('.date_line .next_month').css('display', 'block')
|
|
|
- },1000)
|
|
|
- } else {
|
|
|
- console.log('已到达最大距离')
|
|
|
+ // console.log(dataArr)
|
|
|
+ var str = "";
|
|
|
+ for (var i = 0; i < dataArr.length; i++) {
|
|
|
+ if (i < dataArr.length - 1) {
|
|
|
+ str += "<li class='date_tab_item'>" + dataArr[i] + "</li>";
|
|
|
+ } else {
|
|
|
+ str += "<li class='active_month date_tab_item'>" + dataArr[i] + "</li>";
|
|
|
+ var startTime = dataArr[i] + "-01 00:00:00";
|
|
|
+ var endTime = dataArr[i] + "-31 23:59:59";
|
|
|
+ getTypeStatistic("", startTime, endTime);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ $("#date_line").append(str);
|
|
|
+
|
|
|
+ // 点击前一页
|
|
|
+ $('.date_line .pre_month').click(function () {
|
|
|
+ let offsetNum = $('.date_tab_list').position().left
|
|
|
+ // console.log('父元素偏移量', Math.abs(offsetNum))
|
|
|
+ if (Math.abs(offsetNum) > 0) {
|
|
|
+ $('.date_line .pre_month').css('display', 'none')
|
|
|
+ let offsetLeft = (offsetNum + 1170 + 'px')
|
|
|
+ $(".date_tab_list").animate({left: offsetLeft}, 1000)
|
|
|
+ setTimeout(function () {
|
|
|
+ $('.date_line .pre_month').css('display', 'block')
|
|
|
+ }, 1000)
|
|
|
+ } else {
|
|
|
+ // console.log('已到头')
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 点击后一页
|
|
|
+ $('.date_line .next_month').click(function () {
|
|
|
+ let offsetNum = $('.date_tab_list').position().left
|
|
|
+ let childrenNum = $('.date_tab_list').children('.date_tab_item').length
|
|
|
+ let maxOffset = (Math.ceil(childrenNum / 9) - 1) * 1170
|
|
|
+ // console.log('父元素偏移量', offsetNum)
|
|
|
+ // console.log('子元素数量', childrenNum)
|
|
|
+ // console.log('最大偏移量', maxOffset)
|
|
|
+ if (Math.abs(offsetNum) < maxOffset) {
|
|
|
+ $('.date_line .next_month').css('display', 'none')
|
|
|
+ let offsetLeft = (offsetNum - 1170 + 'px')
|
|
|
+ $(".date_tab_list").animate({left: offsetLeft}, 1000)
|
|
|
+ setTimeout(function () {
|
|
|
+ $('.date_line .next_month').css('display', 'block')
|
|
|
+ }, 1000)
|
|
|
+ } else {
|
|
|
+ // console.log('已到达最大距离')
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 点击统计日期
|
|
|
+ $('.date_tab_list .date_tab_item').click(function () {
|
|
|
+ // console.log('当前点击日期', $(this).html())
|
|
|
+ var startTime = $(this).html() + "-01 00:00:00";
|
|
|
+ var endTime = $(this).html() + "-31 23:59:59";
|
|
|
+ getTypeStatistic("", startTime, endTime)
|
|
|
+ $(this).addClass('active_month').siblings().removeClass("active_month")
|
|
|
+ })
|
|
|
+
|
|
|
+ Date.prototype.format = function (format) {
|
|
|
+ var o = {
|
|
|
+ "M+": this.getMonth() + 1, //month
|
|
|
+ "d+": this.getDate(), //day
|
|
|
+ "h+": this.getHours(), //hour
|
|
|
+ "m+": this.getMinutes(), //minute
|
|
|
+ "s+": this.getSeconds(), //second
|
|
|
+ "q+": Math.floor((this.getMonth() + 3) / 3), //quarter
|
|
|
+ "S": this.getMilliseconds() //millisecond
|
|
|
+ }
|
|
|
+ if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
|
|
|
+ (this.getFullYear() + "").substr(4 - RegExp.$1.length));
|
|
|
+ for (var k in o) if (new RegExp("(" + k + ")").test(format))
|
|
|
+ format = format.replace(RegExp.$1,
|
|
|
+ RegExp.$1.length == 1 ? o[k] :
|
|
|
+ ("00" + o[k]).substr(("" + o[k]).length));
|
|
|
+ return format;
|
|
|
}
|
|
|
})
|
|
|
-
|
|
|
- // 点击统计日期
|
|
|
- $('.date_tab_list .date_tab_item').click(function(){
|
|
|
- console.log('当前点击日期', $(this).html())
|
|
|
- $(this).addClass('active_month').siblings().removeClass("active_month")
|
|
|
- })
|
|
|
-
|
|
|
- Date.prototype.format = function (format) {
|
|
|
- var o = {
|
|
|
- "M+": this.getMonth() + 1, //month
|
|
|
- "d+": this.getDate(), //day
|
|
|
- "h+": this.getHours(), //hour
|
|
|
- "m+": this.getMinutes(), //minute
|
|
|
- "s+": this.getSeconds(), //second
|
|
|
- "q+": Math.floor((this.getMonth() + 3) / 3), //quarter
|
|
|
- "S": this.getMilliseconds() //millisecond
|
|
|
- }
|
|
|
- if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
|
|
|
- (this.getFullYear() + "").substr(4 - RegExp.$1.length));
|
|
|
- for (var k in o) if (new RegExp("(" + k + ")").test(format))
|
|
|
- format = format.replace(RegExp.$1,
|
|
|
- RegExp.$1.length == 1 ? o[k] :
|
|
|
- ("00" + o[k]).substr(("" + o[k]).length));
|
|
|
- return format;
|
|
|
- }
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|