var parklenfun = {
init: function () {
commSelect.area_Pl_LinkedSelect("#parklen-transSelecarea", "#parklen-transSelectPark");
/**日 时间初始化*/
/**日 时间初始化*/
$('#parklen-daydaterange-btnsta').val(moment().subtract('days', 7).format('YYYY-MM-DD'));
$('#parklen-daydaterange-btnend').val(moment().subtract('days', 1).format('YYYY-MM-DD'));
//开始日期
$("#parklen-daydaterange-btnsta").datetimepicker({
endDate: moment().subtract('days', 1).format('YYYY-MM-DD'),
format: 'yyyy-mm-dd',
autoclose: true,
startView: 2,
//maxDate:moment().subtract('months', 3),
minView: 2,
forceParse: false,
locale: "zh-CN",
language: 'zh-CN',
pickerPosition: "bottom-right"
})
//结束日期
$("#parklen-daydaterange-btnend").datetimepicker({
endDate: moment().subtract('days', 1).format('YYYY-MM-DD'),
format: 'yyyy-mm-dd',
autoclose: true,
startView: 2,
//maxDate:moment().subtract('months', 3),
minView: 2,
forceParse: false,
locale: "zh-CN",
language: 'zh-CN',
pickerPosition: "bottom-right"
})
/** 月 时间初始化 **/
$('#parklen-monthdaterange-btnsta').val(moment().subtract('months', 6).format('YYYY-MM'));
$('#parklen-monthdaterange-btnend').val(moment().subtract('months', 0).format('YYYY-MM'));
//开始日期
$("#parklen-monthdaterange-btnsta").datetimepicker({
endDate: moment().subtract('months', 0).format('YYYY-MM'),
format: 'yyyy-mm',
autoclose: true,
startView: 3,
//maxDate:moment().subtract('months', 3),
minView: 3,
forceParse: false,
locale: "zh-CN",
language: 'zh-CN',
pickerPosition: "bottom-right"
})
//结束日期
$("#parklen-monthdaterange-btnend").datetimepicker({
endDate: moment().subtract('months', 0).format('YYYY-MM'),
//startDate:startVal,
format: 'yyyy-mm',
weekStart: 1,
autoclose: true,
startView: 3,
minView: 3,
forceParse: false,
locale: "zh-CN",
language: 'zh-CN',
pickerPosition: "bottom-right"
})
/** 函数 表格数据 **/
parklenfun.parklencreateTableData();
//停车时长占比
chartsInit();
//停车时长分布
parklenfun.getFBEchartsDataAjax();
},
//默认生成表格数据
parklencreateTableData: function () {
$('#parklen-billtable').bootstrapTable('destroy').bootstrapTable({
striped: true,//表格显示条纹
pagination: true, //启动分页
pageNumber: 1, //当前第几页
pageSize: 10, //每页显示的记录数
pageList: [10, 15, 20], //记录数可选列表
sidePagination: 'server',//表示服务端分页
queryParamsType: 'limit',
method: 'POST',//请求方法
paginationPreText: '<',
paginationNextText: '>',
ajax: parklentableLoadRequest,//自定义ajax加载数据
// uniqueId:'id',
columns: [
[
{
field: 'staticTimeStr',
title: '统计时间',
valign: "middle",
align: 'left',
rowspan: 2,
valign: "middle",
formatter: commonObj.replacenull
},
{
field: 'plName',
title: '车场名称',
valign: "middle",
align: 'left',
rowspan: 2,
valign: "middle",
formatter: commonObj.replacenull
},
{
field: 'avgParkDuration',
title: '次均停车时长',
valign: "middle",
align: 'left',
rowspan: 2,
valign: "middle",
formatter: function (value) {
var unit = "小时";
if(isNaN(value) || value == null || value == 0){
return "0"+unit;
}
var str = "";
var hours = (value/ (60 * 60)).toFixed(1);
return hours+unit;
}
},
{
field: 'name',
title: '停车次数',
valign: "middle",
align: "center",
colspan: 7,
rowspan: 1,
formatter: commonObj.replacenull
},
],
[
{
field: 'dataOf1',
title: '0-15m',
width: '10%',
align: "left",
formatter: commonObj.replacenull
},
{
field: 'dataOf2',
title: '15-30m',
width: '10%',
align: "left",
formatter: commonObj.replacenull
},
{
field: 'dataOf3',
title: '30m-1h',
width: '10%',
align: "left",
formatter: commonObj.replacenull
},
{
field: 'dataOf4',
title: '1-6h',
width: '10%',
align: "left",
formatter: commonObj.replacenull
},
{
field: 'dataOf5',
title: '6-12h',
width: '10%',
align: "left",
formatter: commonObj.replacenull
},
{
field: 'dataOf6',
title: '12-24h',
width: '10%',
align: "left",
formatter: commonObj.replacenull
},
{
field: 'dataOf7',
title: '1天以上',
width: '10%',
align: "left",
formatter: commonObj.replacenull
}
]
]
});
},
/*获取查询参数*/
parklengetQueryParam: function () {
var plNos = JSON.parse($("#parklen-transSelectPark").val());
var req = {
parkIds: plNos,
sysCode: sysComm.sysCode
}
if (parklenfun.isDayPage()) {
//按天的页面
var dates1 = $("#parklen-daydaterange-btnsta").val();
var dates2 = $("#parklen-daydaterange-btnend").val();
req.parkOutBeginTime = dates1;
req.parkOutEndTime = dates2;
req.queryKind = 1;
} else {
//按月的页面
req.parkOutBeginTime = $("#parklen-monthdaterange-btnsta").val() + "-01";
req.parkOutEndTime = $("#parklen-monthdaterange-btnend").val() + "-01";
req.queryKind = 2;
}
return req;
},
//是否日报页面
isDayPage: function () {
return $('#queryType').attr('data-value') == '1';
},
getDateArray: function () {
var dateArray = [];
var startDate;
var endDate;
if (parklenfun.isDayPage()) {
//日
startDate = new Date(($('#parklen-daydaterange-btnsta').val() + ' 00:00:00').replace(new RegExp(/-/gm), "/"));
endDate = new Date(($('#parklen-daydaterange-btnend').val() + ' 00:00:00').replace(new RegExp(/-/gm), "/"));
} else {
//月
startDate = new Date(($('#parklen-monthdaterange-btnsta').val() + '-01 00:00:00').replace(new RegExp(/-/gm), "/"));
endDate = new Date(($('#parklen-monthdaterange-btnend').val() + '-01 00:00:00').replace(new RegExp(/-/gm), "/"));
}
while (true) {
if (parklenfun.isDayPage()) {
//日
dateArray.push(DateUtils.long2String(startDate.getTime(), 1));
startDate.setDate(startDate.getDate() + 1);
} else {
//月
var tempDateStr = DateUtils.long2String(startDate.getTime(), 1)
var temp = tempDateStr.split('-');
dateArray.push(temp[0] + '-' + temp[1]);
startDate.setMonth(startDate.getMonth() + 1);
}
if (startDate.getTime() > endDate.getTime()) {
break;
}
}
return dateArray;
},
//获取停车时长分布图 echarts 数据
getFBEChartsDataArray: function (remoteData) {
//最终结果
var result = {};
var dateArray = parklenfun.getDateArray();
result['dateArray'] = dateArray;
// 0 - 15 分钟数据
var $0_15 = [];
var $15_30 = [];
var $30_1h = [];
var $1h_6h = [];
var $6h_12h = [];
var $12h_24h = [];
var $1dayup = [];
//1、将ajax返回的远程数据 初步处理,将同一日期的对应数据进行合并相加。
var dateDataTemp = {};
$.each(remoteData, function (index, item) {
var temp = [];
temp[0] = (item['dataOf1'] == null ? 0 : item['dataOf1']);
temp[1] = (item['dataOf2'] == null ? 0 : item['dataOf2']);
temp[2] = (item['dataOf3'] == null ? 0 : item['dataOf3']);
temp[3] = (item['dataOf4'] == null ? 0 : item['dataOf4']);
temp[4] = (item['dataOf5'] == null ? 0 : item['dataOf5']);
temp[5] = (item['dataOf6'] == null ? 0 : item['dataOf6']);
temp[6] = (item['dataOf7'] == null ? 0 : item['dataOf7']);
dateDataTemp[item.staticTimeStr] = temp;
})
console.log('dateDataTemp:' + JSON.stringify(dateDataTemp));
//2、组装成 eCharts 需要的数据
$.each(dateArray, function (index, dateItem) {
var temp = dateDataTemp[dateItem]
if (null != temp) {
$0_15.push(temp[0]);
$15_30.push(temp[1]);
$30_1h.push(temp[2]);
$1h_6h.push(temp[3]);
$6h_12h.push(temp[4]);
$12h_24h.push(temp[5]);
$1dayup.push(temp[6]);
} else {
$0_15.push(0);
$15_30.push(0);
$30_1h.push(0);
$1h_6h.push(0);
$6h_12h.push(0);
$12h_24h.push(0);
$1dayup.push(0);
}
})
result['$0_15'] = $0_15;
result['$15_30'] = $15_30;
result['$30_1h'] = $30_1h;
result['$1h_6h'] = $1h_6h;
result['$6h_12h'] = $6h_12h;
result['$12h_24h'] = $12h_24h;
result['$1dayup'] = $1dayup;
return result;
},
getFBEchartsDataAjax: function () {
var req = parklenfun.parklengetQueryParam();
var opt = {
method: 'post',
url: dataUrl.util.queryParkDurationDataForFBECharts(),
data: JSON.stringify(req),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (res) {
if (res.code == '8888') {
fbchartDataHandel(res.data);
}
}
};
sysAjax(opt);
},
};
//默认页面初始执行函数
parklenfun.init();
/**
* 默认table 函数
* 自定义table AJAX请求
* @param {Object} params
*/
function parklentableLoadRequest(params) {
var req = parklenfun.parklengetQueryParam();
//设置请求参数
var pageNum = (params.data.offset / params.data.limit) + 1;
//条件查询
req.baseRequest = {
pageNum: pageNum,
pageSize: params.data.limit
};
var opt = {
method: 'post',
url: dataUrl.util.queryParkDurationDataForPage(),
data: JSON.stringify(req),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (res) {
if (res.code == '8888') {
params.success(res.data);
}
}
};
sysAjax(opt);
}
//导出
var InterValObj; //timer变量,控制时间
var count = 8; //间隔函数,1秒执行
var curCount;//当前剩余秒数
function sendMessage() {
curCount = count;
//设置button效果,开始计时
$("#parklen-detailBtn").attr("disabled", "true");
$(".ITD-export-btn").css("width", "138px");
$("#parklen-detailBtn").val(curCount + "秒后可再次导出");
InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
}
//timer处理函数
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);//停止计时器
$("#parklen-detailBtn").removeAttr("disabled");//启用按钮
$(".ITD-export-btn").css("width", "72px");
$("#parklen-detailBtn").val("导出");
}
else {
curCount--;
$("#parklen-detailBtn").val(curCount + "秒后可再次导出");
}
}
//导出excle
documentBindFunc.on('click','#parklen-detailBtn',function (){
//获取table所有行数据
var parkLot = $("#parklen-billtable").bootstrapTable('getData');
//获取table总条数
var numTotal = $("#parklen-billtable").bootstrapTable('getOptions').totalRows;
//提示 无数据不导出
if(parkLot.length<1){
$('.ITD-alertmodel-contentmsg').text('无数据可导出!');
$('#ITD-tipsmodel').modal('show');
setTimeout(function () {
$('.ITD-alertmodel-contentmsg').text('');
$('#ITD-tipsmodel').modal('hide');
},3000);
return false;
}
//超1万条 缩短查询范围
if(numTotal>10000){
$('.ITD-alertmodel-contentmsg').text('数据量过大,请缩小查询范围!');
$('#ITD-tipsmodel').modal('show');
setTimeout(function () {
$('.ITD-alertmodel-contentmsg').text('');
$('#ITD-tipsmodel').modal('hide');
},3000);
return false;
}
//执行倒计时函数
sendMessage();
exportTableData();
});
//点击查询事件
documentBindFunc.on('click', '#parklen-billQueryBnt', function () {
parklenfun.parklencreateTableData();
//柱状图
chartsInit();
//分布图
parklenfun.getFBEchartsDataAjax();
});
function chartsInit() {
console.log(134)
var req = parklenfun.parklengetQueryParam();
var opt = {
method: 'post',
url: dataUrl.util.queryParkDurationDataForChart(),
data: JSON.stringify(req),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (res) {
console.log(res)
if (res.code == '8888') {
chartDataHandel(res.data);
}
}
};
sysAjax(opt);
}
function chartDataHandel(data) {
console.log("chartsData:" + JSON.stringify(data));
//封闭
var fbArray = [];
//路侧
var lcArray = [];
$.each(data, function (index, item) {
if (item.plType == 1) {
//路侧
if (item.dataOf1 == null) {
lcArray.push(0);
} else if (item.dataOf2 == null) {
lcArray.push(0);
} else if (item.dataOf3 == null) {
lcArray.push(0);
} else if (item.dataOf4 == null) {
lcArray.push(0);
} else if (item.dataOf5 == null) {
lcArray.push(0);
} else if (item.dataOf6 == null) {
lcArray.push(0);
} else if (item.dataOf7 == null) {
lcArray.push(0);
} else {
lcArray.push(item.dataOf1);
lcArray.push(item.dataOf2);
lcArray.push(item.dataOf3);
lcArray.push(item.dataOf4);
lcArray.push(item.dataOf5);
lcArray.push(item.dataOf6);
lcArray.push(item.dataOf7);
}
}
else {
//封闭
if (item.dataOf1 == null) {
fbArray.push(0);
} else if (item.dataOf2 == null) {
fbArray.push(0);
} else if (item.dataOf3 == null) {
fbArray.push(0);
} else if (item.dataOf4 == null) {
fbArray.push(0);
} else if (item.dataOf5 == null) {
fbArray.push(0);
} else if (item.dataOf6 == null) {
fbArray.push(0);
} else if (item.dataOf7 == null) {
fbArray.push(0);
} else {
fbArray.push(item.dataOf1);
fbArray.push(item.dataOf2);
fbArray.push(item.dataOf3);
fbArray.push(item.dataOf4);
fbArray.push(item.dataOf5);
fbArray.push(item.dataOf6);
fbArray.push(item.dataOf7);
}
}
});
fbArray = (fbArray.length ==0?[0,0,0,0,0,0,0]:fbArray);
lcArray = (lcArray.length ==0?[0,0,0,0,0,0,0]:lcArray);
//停车占比 echarts
var myChart = echarts.init(document.getElementById('parklen-echarts'));
var option = {
// color:['#fe6c75','#fedb33','#3fc2a5'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
// backgroundColor: 'rgba(0,0,0,0.5)'
}
}
},
legend: {
right: '2%',
top: '0',
textStyle: {
color: '#888990',
},
itemWidth: 18,
itemHeight: 10,
data: ['封闭', '路侧']
},
grid: {
top: '13%',
left: '1%',
right: '2%',
bottom: '2%',
containLabel: true
},
xAxis: [
{
type: 'category',
axisLabel: {
show: true,
textStyle: {
color: 'rgba(0,0,0,0.5)',
fontSize: '12px',
fontFamily: '微软雅黑'
}
},
axisLine: {
show: false
},
splitLine: {
lineStyle: {
color: 'rgba(0,0,0,0.1)',
}
},
/*axisLine: {
lineStyle: {
color: '#ccc',
width: 1,//这里是为了突出显示加上的
}
},*/
axisTick: {
show: false
},
// data:[1,2,3,4,5,6,7],
data: ['0-15m', '15-30m', '30m-1h', '1-6h', '6-12h', '12-24h', '1天以上']
}
],
yAxis: [
{
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: 'rgba(0,0,0,0.5)',
fontSize: '12px',
fontFamily: '微软雅黑'
}
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(0,0,0,0.1)',
width: 1,//这里是为了突出显示加上的
}
},
splitLine: {
lineStyle: {
// type:'dashed',
color: 'rgba(0,0,0,0.1)',
}
}
},
],
series: [
{
name: '封闭',
type: 'bar',
itemStyle: {
normal: {
color: '#5cb3d8',
/* color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#fe6974'},
{offset: 1, color: '#fea886'}
]
)*/
},
emphasis: {
color: '#5cb3d8',
/*color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#fe6974'},
{offset: 1, color: '#fea886'}
]
)*/
}
},
barGap: '30%',
barWidth: 20,
markPoint: {
label: {
normal: {
show: false
}
},
data: [
{
// type: 'max',
// name: '最大值',
// symbol: 'image://../../assets/pages/scripts/operationFile/img/dayparkinglength-redcar.png',
// symbolSize: [14, 18],
// symbolOffset: [0, '-100%'],
},
]
},
// data: [3,42,32,242,23]
data: fbArray
},
{
name: '路侧',
type: 'bar',
itemStyle: {
normal: {
color: '#5fe890'
/*color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#2abb9b'},
{offset: 1, color: '#57cbf6'}
]
)*/
},
emphasis: {
color: '#5fe890'
/*color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#2abb9b'},
{offset: 1, color: '#57cbf6'}
]
)*/
}
},
// barGap:'10',
barWidth: 20,
markPoint: {
label: {
normal: {
show: false
}
},
data: [
{
// type: 'max',
// name: '最大值',
// value: 0,
// symbol: 'image://../../assets/pages/scripts/operationFile/img/dayparkinglength-greencar.png',
// symbolSize: [14, 11],
// symbolOffset: [0, '-100%'],
},
]
},
data: lcArray
// data: [3,42,32,242,23]
},
]
};
myChart.setOption(option, true);
//浏览器滚动 echart自适应
window.onresize = function () {
myChart.resize();
};
}
//停车分布echarts
function fbchartDataHandel(remoteData) {
console.log("fbchartsData:" + JSON.stringify(remoteData));
var result = parklenfun.getFBEChartsDataArray(remoteData);
//停车分布 echarts
var mylineChart = echarts.init(document.getElementById('parklen-line-echarts'));
var lineoption = {
color: ['#50c0f5', '#5fe98f', '#fd8d6f', '#fdd471', '#7dcecf', '#a5dff3', '#fff1db'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
// backgroundColor: 'rgba(0,0,0,0.5)'
}
}
},
// legend: {
// right: '2%',
// top: '0',
// textStyle: {
// color: '#888990',
// },
// itemWidth: 18,
// itemHeight: 10,
// data: ['封闭', '路侧']
// },
grid: {
top: '13%',
left: '1%',
right: '2%',
bottom: '2%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
axisLabel: {
show: true,
textStyle: {
color: 'rgba(0,0,0,0.5)',
fontSize: '12px',
fontFamily: '微软雅黑'
}
},
axisLine: {
show: false
},
splitLine: {
lineStyle: {
color: 'rgba(0,0,0,0.1)',
}
},
/*axisLine: {
lineStyle: {
color: '#ccc',
width: 1,//这里是为了突出显示加上的
}
},*/
axisTick: {
show: false
},
// data:[1,2,3,4,5,6,7],
data: result['dateArray']
}
],
yAxis: [
{
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: 'rgba(0,0,0,0.5)',
fontSize: '12px',
fontFamily: '微软雅黑'
}
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(0,0,0,0.1)',
width: 1,//这里是为了突出显示加上的
}
},
splitLine: {
lineStyle: {
// type:'dashed',
color: 'rgba(0,0,0,0.1)',
}
}
},
],
series: [
{
name: '0-15m',
type: 'line',
stack: '总量',
areaStyle: {normal: {}},
data: result['$0_15']
},
{
name: '15-30m',
type: 'line',
stack: '总量',
areaStyle: {normal: {}},
data: result['$15_30']
},
{
name: '30m-1h',
type: 'line',
stack: '总量',
areaStyle: {normal: {}},
data: result['$30_1h']
},
{
name: '1-6h',
type: 'line',
stack: '总量',
areaStyle: {normal: {}},
data: result['$1h_6h']
},
{
name: '6-12h',
type: 'line',
stack: '总量',
areaStyle: {normal: {}},
data: result['$6h_12h']
},
{
name: '12-24h',
type: 'line',
stack: '总量',
areaStyle: {normal: {}},
data: result['$12h_24h']
},
{
name: '1天以上',
type: 'line',
stack: '总量',
areaStyle: {normal: {}},
data: result['$1dayup']
},
]
};
mylineChart.setOption(lineoption, true);
//浏览器滚动 echart自适应
window.onresize = function () {
mylineChart.resize();
};
}
//隐藏显示 查询条件 搜索框 hide-common-style
documentBindFunc.on('click', ".ITD-search-morebtn", function () {
$(".hide-common-style").toggleClass("display-none");
});
//日月切换 点击事件
//日 点击
documentBindFunc.on('click', '#parklen-checkStyle1', function () {
$('.parklen-choosedateday').removeClass('display-none');
$('.parklen-choosedatemonth').addClass('display-none');
$('#queryType').attr('data-value', '1');
});
//月 点击
documentBindFunc.on('click', '#parklen-checkStyle0', function () {
$('.parklen-choosedatemonth').removeClass('display-none');
$('.parklen-choosedateday').addClass('display-none');
$('#queryType').attr('data-value', '2');
});
function exportTableData() {
var req = parklenfun.parklengetQueryParam();
var form = document.createElement("form");
form.style.display = 'none';
form.action = dataUrl.util.exportPardDurationData();
form.method = "post";
document.body.appendChild(form);
var input = document.createElement("input");
input.name = "plNosStr";
input.value = JSON.stringify(req.parkIds);
form.appendChild(input);
var input1 = document.createElement("input");
input1.name = "startTimeStr";
input1.value = req.parkOutBeginTime;
form.appendChild(input1);
var input2 = document.createElement("input");
input2.name = "endTimeStr";
input2.value = req.parkOutEndTime;
form.appendChild(input2);
var input3 = document.createElement("input");
input3.name = "queryKind";
input3.value = req.queryKind;
form.appendChild(input3);
form.submit();
}