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(); }