<%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%> <c:set var="ctx" value="${pageContext.request.contextPath}"/> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>业务特征分析</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="${ctx}/static/js/canvg.js"></script> <style type="text/css"> #tiplayer { //当鼠标移动到哪个省的时候,显示省名称 padding-right: 5px; padding-left: 5px; z-index: 1000; min-height: 1em; background: #000; padding-bottom: 5px; font: 14px 'Microsoft YaHei', Arial, 宋体, Tahoma, Sans-Serif; color: #fff; padding-top: 5px; position: absolute; text-align: center; word-wrap: break-word; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } #bus { padding-right: 5px; padding-left: 5px; z-index: 1000; min-height: 1em; background: #000; padding-bottom: 5px; font: 14px 'Microsoft YaHei', Arial, 宋体, Tahoma, Sans-Serif; color: #fff; padding-top: 5px; position: absolute; text-align: center; word-wrap: break-word; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { padding: 7px; } .form-control { display: block; width: 200%; height: 20px; padding: 2px 6px; font-size: 10px; line-height: 1; color: #555555; vertical-align: middle; background-color: #ffffff; background-image: none; border: 1px solid #cccccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; } #show_06 a.large { width: 1px; height: 1px; border: 0px; display: block; left: -1px; top: -1px; position: absolute; } .bgbg2{background:#fff; text-align:center;padding-left:5px;} </style> <!-- 添加结束 --> </head> <body> <form action="#" method="get" id="listForm"> <input type="hidden" id="str" name="str" value="${str}" /> </form> <!-- 添加 --> <!-- select1取得筛选框的值 --> <input type="hidden" id="ywtz_test1" name="ywtz_test1"/> <input type="hidden" id="ywtz_test2" name="ywtz_test2"/> <input type="hidden" id="ywtz_llq1" name="ywtz_llq1"/> <input type="hidden" id="wind" name="wind" value="100"/> <input type="hidden" id="mapData" name="mapData" value=""/> <!-- 添加结束--> <div id="sticky-wrap"> <div class="dataexplorer dataexplorer_floating"></div> <div> <div class="container"> <ol class="breadcrumb"> <li><a href="${ctx}/index">首页</a></li> <li>运营支撑</li> <li class="active">业务特征分析</li> </ol> </div> </div> </div> <div id="main-container"> <div id="content" class="container"> <div class="tab-bar-bt"> <ul class="nav nav-tabs"> <li class="active"><a id="a_home" href="#home" data-toggle="tab">地市热点分析</a> </li> <li><a href="${ctx}/AnalysisSupport/ChannelAnalysis">渠道热点分析</a> </li> </ul> </div> <div class="section"> <div class="tab-content"> <!-- ---------------------------------- 地市热点 -------------------------------------------------- --> <div class="tab-pane fade in active" id="home"> <div class="row me-row"> <div id="slidePushMenus" class="cbp-spmenu-push"> <div class="slideMenu" id="cbp-spmenu-s1" style=""> <div class="form"> <tags:YWTZ_City_PeriodTag /> <br> <tags:YWTZ_DataSourceTag /> <br> <button type="button" class="btn btn-primary" onclick="fun()">提交</button> <button type="reset" class="btn btn-warning" onclick="reset()">重置</button> </div> </div> <div class="main col-xs-12"> <div id="mainm" class="mainm"></div> <div class="content clearfix"> <div class="block clearfix"> <button id="showLeftPush" class="menu-trigger btn btn-default" onclick="toggleMenu('slidePushMenus')"> <span class="glyphicon glyphicon-list"></span> </button> <div class="slide-menu-tags"> <div id="provinceLabel" class="label label-info">全国</div> <div id="periodLabel" class="label label-info" data-placement="bottom"></div> <div id="dataSourceLabel" class="label label-info" data-placement="bottom"></div> <div id="BelongingOrVisitingLabel" class="label label-info" data-placement="bottom"></div> <div id="channelLabel" class="label label-info" data-placement="bottom"></div> <div id="businessLabel" class="label label-info" data-placement="bottom">默认业务</div> </div> <div class="bt-list-import"> <a href="#" id="exportData1" class="exportData"> <span class="glyphicon glyphicon-import"></span> <span class="glyphicon-class">导出报表</span> </a> </div> <div class="tab-content"> <div class="tab-pane fade in active" > <div class="row"> <div class="col-xs-7" > <div class="panel panel-default" > <div class="panel-heading">热点分析</div> <div class="panel-body" style="overflow:hidden"> <!-- 地图展示在此--> <div name="loading" class="loading"><img src="${ctx}/static/images/loading.gif"/></div> <div id="nan_div" style="position:absolute; z-index:9;right:1px; bottom:3px;width:20%;" ><img width="100%" height="150px" src="${ctx}/static/images/map1.jpg"/></div> <div id="map" style="z-index:8;height:540px;"></div> <!-- 地图展示在此--> </div> </div> </div> <div class="col-xs-5"> <div class="panel panel-default"> <div class="panel-heading"> <span id="ProvinceDiv">全国</span><span id="BelongOrVisitingDiv">归属</span>地市业务量 <div id="time_div" class="btn-group btn-group-cog" style=""> <button type="button" class="btn btn-default dropdown-toggle btn-control-cog" data-toggle="dropdown"> <span class="glyphicon glyphicon-cog"></span> </button> <ul class="dropdown-menu dropdown-menu-right" id="dropdown" role="menu"> <li><a id="barchart" href="#" onclick="javascript:barChart()">柱状图</a> </li> <li><a id="excel" href="#" onclick="javascript:execlChart()">表格</a> </li> </ul> </div> <div id="big_div" class="btn-group btn-group-cog" style=""> <button type="button" id="big" class="btn btn-default dropdown-toggle btn-control-cog" onclick="javascript:bigImg()"> <span class="glyphicon glyphicon-zoom-in"></span> </button></div> </div> <div class="panel-body" style="padding:0 0 0 0;"> <div id="div1" style="height:217px"> <div name="loading" class="loading"><img src="${ctx}/static/images/loading.gif"/></div> <iframe id="eee" name="eee" scrolling="no"></iframe> </div> <!-- 全国来访地市业务量--> <!-- 二维表 --> <div id="div2" style="display:none;height:217px"> <table id="testTable" class="table table-hover table-striped" style="text-align:center;"> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"><span id="ProvinceDiv1">全国</span>业务办理量统计</div> <div class="panel-body"> <div name="loading" class="loading"><img src="${ctx}/static/images/loading.gif"/></div> <iframe id="ywtz_yw" name="ywtz_yw" scrolling="no" style="height:250px"></iframe> </div> </div> </div> <div id="yw_llq" class="col-xs-12"> <div class="panel panel-default"> <div class="panel-heading "><span id="ProvinceDiv2">全国</span>浏览器热点分析</div> <div class="panel-body"> <div id="llq"> <div name="loading" class="loading"><img src="${ctx}/static/images/loading.gif"/></div> <iframe id="ywtz_llq" style="height:280px;" frameborder="0" scrolling="yes" name="ywtz_llq"></iframe> </div> </div> </div> </div> </div> <div style="display:none"><canvas id="canvas"></canvas></div> <form id="export" action="#" method="post"> <input type="hidden" id="pngsrc" name="pngsrc" value=""> </form> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- 地图展示所需js --> <script type="text/javascript" src="${ctx}/static/js/raphael.js"></script> <script type="text/javascript" src="${ctx}/static/js/chinamapPath.js"></script> <script type="text/javascript" src="${ctx}/static/js/chinamap.js"></script> <!-- 二维表 --> <script type="text/javascript" src="${ctx}/static/js/table.js"></script> <!-- pentaho报表写入后台日志 --> <script type="text/javascript" src="${ctx}/static/js/publicLog.js"></script> <script type="text/jscript"> //显示大图 function bigImg(){ checkTest(); if(document.getElementById("ProvinceDiv").title == ""){ dialog_artDialog(document.getElementById("ProvinceDiv").innerHTML+""+document.getElementById("BelongOrVisitingDiv").innerHTML+"地市业务量","<iframe src='${biserver_config}&path=analysissupport&action=ywtz.xaction&&width="+iframeWidth*0.7+"&height=250&CityTag="+getBelongingOrVisitingCheckedValuesString()+"&BusinessTag="+businessAllId+"&ChannelTag="+getChannelCheckedValuesString()+"&DataSourceTag="+getDataSourceCheckedValuesString()+"&PeriodTag="+getPeriodString()+"&kpiTag="+kpiAllId+"' style='width:"+iframeWidth+"px; height:400px' scrolling='no'/>",iframeWidth,"550px"); }else{ dialog_artDialog(document.getElementById("ProvinceDiv").innerHTML+""+document.getElementById("BelongOrVisitingDiv").innerHTML+"地市业务量","<iframe src='${biserver_config}&path=analysissupport&action=ywtz.xaction&&width="+iframeWidth*0.7+"&height=250&CityTag="+getBelongingOrVisitingCheckedValuesString()+"&BusinessTag="+businessAllId+"&ChannelTag="+getChannelCheckedValuesString()+"&DataSourceTag="+getDataSourceCheckedValuesString()+"&PeriodTag="+getPeriodString()+"&kpiTag="+kpiAllId+"&ProvinceTag="+document.getElementById("ProvinceDiv").title+"' style='width:"+iframeWidth+"px; height:400px' scrolling='no'/>",iframeWidth,"550px"); } } function checkTest() { if(getBusinessCheckedValuesStringId() == "" || getBusinessCheckedValuesStringId() == null){}else{ businessAllId = getBusinessCheckedValuesStringId(); } if(getKpiCheckedValuesStringId() == "" || getKpiCheckedValuesStringId() == null){ }else{ kpiAllId = getKpiCheckedValuesStringId(); } } $(document).ready(function() { //地市热点分析筛选项默认时间值 initDate(); $('#periodLabel').text("最近一个月").attr('data-original-title',getPeriodString().split(",")[0]+"~~"+getPeriodString().split(",")[1]).tooltip(); $('#dataSourceLabel').text("数据来源").attr('data-original-title',getDataSourceCheckedValuesStringTitle()).tooltip(); $('#BelongingOrVisitingLabel').text(getBelongingOrVisitingCheckedValuesStringTitle()); $('#channelLabel').text("渠道").attr('data-original-title',getChannelCheckedValuesStringTitle()).tooltip(); $('#businessLabel').text("业务").tooltip({title:getBusinessCheckedValuesStringTitle()}); document.getElementById("ywtz_test1").value = "${biserver_config}&path=analysissupport&action=ywtz.xaction&width="+iframeWidth*0.4+"&height=155"; document.getElementById("ywtz_test2").value = "${biserver_config}&path=analysissupport&action=YWTZ_yw.xaction&width="+iframeWidth*0.4+"&height=185"; document.getElementById("ywtz_llq1").value = "${biserver_config}&path=analysissupport&action=YWTZ_llq.xaction&wrapper=false&width="+iframeWidth*0.9+"&height=180"; checkTest(); str = getDataSourceCheckedValuesString() + "&" + // "归属或来访地市:"+ getBelongingOrVisitingCheckedValuesString()+"&"+ // "渠道:" getChannelCheckedValuesString()+ "&" + //"业务:"+ businessAllId+ "&" + //"时间范围:"+ getPeriodString()+"&"+kpiAllId; document.getElementById("str").value=str; for(var i=0;i<$('iframe').length;i++){ if($('iframe').eq(i).parent().find('.loading').length>0){ $('iframe').eq(i).parent().find('.loading').fadeIn("fast"); //显现loading图片 $('iframe').eq(i).load( function(){ $(this).parent().find('.loading').fadeOut("fast"); });//隐藏loading图片 } } $("#ywtz_llq").attr("src", document.getElementById("ywtz_llq1").value+"&CityTag="+getBelongingOrVisitingCheckedValuesString()+"&BusinessTag="+businessAllId+"&ChannelTag="+getChannelCheckedValuesString()+"&PeriodTag="+getPeriodString()+"&kpiTag="+kpiAllId); $("#eee").attr("src", document.getElementById("ywtz_test1").value+"&CityTag="+getBelongingOrVisitingCheckedValuesString()+"&BusinessTag="+businessAllId+"&DataSourceTag="+getDataSourceCheckedValuesString()+"&PeriodTag="+getPeriodString()+"&kpiTag="+kpiAllId); $("#ywtz_yw").attr("src",document.getElementById("ywtz_test2").value+"&CityTag="+getBelongingOrVisitingCheckedValuesString()+"&BusinessTag="+businessAllId+"&ChannelTag="+getChannelCheckedValuesString()+"&DataSourceTag="+getDataSourceCheckedValuesString()+"&PeriodTag="+getPeriodString()+"&kpiTag="+kpiAllId); table(); dataTest(); }); var iframeWidth=760; var businessAllId = "0"; var kpiAllId = "0"; var judge = true; //把二维表数据信息导出为Excel格式 $("#upload").click(function(){ var listForm=$("#listForm"); listForm.attr("action","${ctx}/AnalysisSupport/ServiceFeature/upLoadExcel"); listForm.submit(); listForm.attr("action","#"); }); function reset(){ YWTZ_City_PeriodTagReset(); YWTZ_DataSourceTagReset(); judge = true; } //筛选项处理 function fun(){ if(getPeriodString() == "" || getPeriodString() == null){ $.alert("时间范围不能为空"); }else if(getChannelCheckedValuesString() =="" || getChannelCheckedValuesString() == null){ $.alert("渠道不能为空!"); }else if(getBusinessCheckedValuesStringId() == "" || getBusinessCheckedValuesStringId() == null){ $.alert("业务不能为空"); }else if(getKpiCheckedValuesStringTitle() == "" || getKpiCheckedValuesStringTitle() == null){ $.alert("指标不能为空"); }else{ toggleMenu('slidePushMenus');//隐藏筛选项 checkTest(); //筛选框标签值 if(judge == true){ $('#periodLabel').text("最近一个月").attr('data-original-title',getPeriodString().split(",")[0]+"~~"+getPeriodString().split(",")[1]).tooltip(); $('#dataSourceLabel').text("数据来源").attr('data-original-title',getDataSourceCheckedValuesStringTitle()).tooltip(); $('#BelongingOrVisitingLabel').text(getBelongingOrVisitingCheckedValuesStringTitle()); $('#channelLabel').text("渠道").attr('data-original-title',getChannelCheckedValuesStringTitle()).tooltip(); $('#businessLabel').text("业务").tooltip({title:getBusinessCheckedValuesStringTitle()}); $('#provinceLabel').text("全国"); document.getElementById("ProvinceDiv").innerHTML="全国"; document.getElementById("ProvinceDiv").title = ""; document.getElementById("ProvinceDiv1").innerHTML="全国"; document.getElementById("ProvinceDiv1").title = ""; document.getElementById("ProvinceDiv2").innerHTML="全国"; document.getElementById("ProvinceDiv2").title = ""; document.getElementById("str").value= getDataSourceCheckedValuesString() + "&" + getBelongingOrVisitingCheckedValuesString()+"&"+ getChannelCheckedValuesString()+ "&" + businessAllId+ "&" + getPeriodString()+"&"+kpiAllId; }else{ $('#businessLabel').text("业务").attr('data-original-title',getBusinessCheckedValuesStringTitle()).append($("<span class='badge'></span>").text(getBusinessCheckedValuesTitle().length)).tooltip(); $('#channelLabel').text("渠道").attr('data-original-title',getChannelCheckedValuesStringTitle()).append($("<span class='badge'></span>").text(getChannelCheckedValuesTitle().length)).tooltip(); $('#periodLabel').text("时间范围").attr('data-original-title',getPeriodString().split(",")[0]+"~~"+getPeriodString().split(",")[1]); $('#dataSourceLabel').text("数据来源").attr('data-original-title',getDataSourceCheckedValuesStringTitle()).append($("<span class='badge'></span>").text(getDataSourceCheckedValuesTitle().length)).tooltip(); $('#BelongingOrVisitingLabel').text(getBelongingOrVisitingCheckedValuesStringTitle()).attr('data-original-title',getBelongingOrVisitingCheckedValuesStringTitle()); } //数据来源为capes时不显示浏览器报表 if("3" == getDataSourceCheckedValuesString()){ document.getElementById("yw_llq").style.display=""; }else{ document.getElementById("yw_llq").style.display="none"; } var name = document.getElementById("ProvinceDiv").innerHTML; for(var i=0;i<$('iframe').length;i++){ if($('iframe').eq(i).parent().find('.loading').length>0){ $('iframe').eq(i).parent().find('.loading').fadeIn("fast"); //显现loading图片 $('iframe').eq(i).load( function(){ $(this).parent().find('.loading').fadeOut("fast"); });//隐藏loading图片 } } if("全国" == name){ str = getDataSourceCheckedValuesString() + "&" + // "归属或来访地市:"+ getBelongingOrVisitingCheckedValuesString()+"&"+ // "渠道:" getChannelCheckedValuesString()+ "&" + //"业务:"+ getBusinessCheckedValuesStringId()+ "&" + //"时间范围:"+ getPeriodString()+"&"+getKpiCheckedValuesStringId(); $("#eee").attr("src", document.getElementById("ywtz_test1").value+"&CityTag="+getBelongingOrVisitingCheckedValuesString()+"&BusinessTag="+getBusinessCheckedValuesStringId()+"&DataSourceTag="+getDataSourceCheckedValuesString()+"&PeriodTag="+getPeriodString()+"&kpiTag="+getKpiCheckedValuesStringId()); $("#ywtz_yw").attr("src",document.getElementById("ywtz_test2").value+"&CityTag="+getBelongingOrVisitingCheckedValuesString()+"&BusinessTag="+getBusinessCheckedValuesStringId()+"&ChannelTag="+getChannelCheckedValuesString()+"&DataSourceTag="+getDataSourceCheckedValuesString()+"&PeriodTag="+getPeriodString()+"&kpiTag="+getKpiCheckedValuesStringId()); $("#ywtz_llq").attr("src", document.getElementById("ywtz_llq1").value+"&CityTag="+getBelongingOrVisitingCheckedValuesString()+"&BusinessTag="+businessAllId+"&ChannelTag="+getChannelCheckedValuesString()+"&PeriodTag="+getPeriodString()+"&kpiTag="+getKpiCheckedValuesStringId()); }else{ str = getDataSourceCheckedValuesString() + "&" + // "归属或来访地市:"+ getBelongingOrVisitingCheckedValuesString()+"&"+ // "渠道:" getChannelCheckedValuesString()+ "&" + //"业务:"+ getBusinessCheckedValuesStringId()+ "&" + //"时间范围:"+ getPeriodString()+ "&" + document.getElementById("ProvinceDiv").innerHTML+"&"+getKpiCheckedValuesStringId(); $("#eee").attr("src", document.getElementById("ywtz_test1").value+"&ProvinceTag="+document.getElementById("ProvinceDiv").title+"&CityTag="+getBelongingOrVisitingCheckedValuesString()+"&BusinessTag="+getBusinessCheckedValuesStringId()+"&DataSourceTag="+getDataSourceCheckedValuesString()+"&PeriodTag="+getPeriodString()+"&kpiTag="+getKpiCheckedValuesStringId()); $("#ywtz_yw").attr("src",document.getElementById("ywtz_test2").value+"&ProvinceTag="+document.getElementById("ProvinceDiv").title+"&CityTag="+getBelongingOrVisitingCheckedValuesString()+"&BusinessTag="+getBusinessCheckedValuesStringId()+"&ChannelTag="+getChannelCheckedValuesString()+"&DataSourceTag="+getDataSourceCheckedValuesString()+"&PeriodTag="+getPeriodString()+"&kpiTag="+getKpiCheckedValuesStringId()); $("#ywtz_llq").attr("src", document.getElementById("ywtz_llq1").value+"&ProvinceTag="+document.getElementById("ProvinceDiv").title+"&CityTag="+getBelongingOrVisitingCheckedValuesString()+"&BusinessTag="+businessAllId+"&ChannelTag="+getChannelCheckedValuesString()+"&PeriodTag="+getPeriodString()+"&kpiTag="+getKpiCheckedValuesStringId()); } document.getElementById("str").value=str; if("1" == getBelongingOrVisitingCheckedValuesString()){ document.getElementById("BelongOrVisitingDiv").innerHTML="归属"; }else if("2" == getBelongingOrVisitingCheckedValuesString()){ document.getElementById("BelongOrVisitingDiv").innerHTML="来访"; } $("#map").parent().find('.loading').fadeIn("fast"); dataTest(); table(); } } function barChart(){ document.getElementById("div1").style.display=""; document.getElementById("div2").style.display="none"; document.getElementById("big").style.display=""; $("#eee").parent().find('.loading').fadeOut("fast");//隐藏loading图片 } function execlChart(){ document.getElementById("div1").style.display="none"; document.getElementById("div2").style.display=""; document.getElementById("big").style.display="none"; } //导出报表 $(".exportData").click(function(){ //导出svg矢量图 start //console.log($("#map").html()); console.log("00000000"); canvg('canvas', $("#map").html()); console.log("111111111"); var img1 = canvas.toDataURL("image/png"); // console.log(img1); $("#pngsrc").val(img1); //转化成的图片存入pngsrc中 //导出svg矢量图 end var picArr = new Array(); $("#home").find("iframe").each(function(){ var tmpArr = new Array(); var tmpStr = $(window.frames[$(this).attr("id")].document).find("img").attr("src"); if(tmpStr != "" && tmpStr != null && tmpStr != undefined){ tmpArr = tmpStr.split("?image="); picArr.push(tmpArr[1]); } }); var picStr = picArr.join(","); $.dialog({ id: "export", title: "请选择导出文件类型", content: "<div style='position:relative;height:40px;margin:0 0 0 11px;'><div class='form-horizontal'>" +"<div class='form-group'><div class='col-sm-4'><label class='radio-inline'><input type='radio' name='expradio' class='expradio' value='word' checked/>Word</label></div>" +"<div class='col-sm-4'><label class='radio-inline'><input type='radio' name='expradio' class='expradio' value='excel'/>Excel</label></div>" +"<div class='col-sm-4'><label class='radio-inline'><input type='radio' name='expradio' class='expradio' value='pdf'/>Pdf</label></div></div>" +"</div></div>", width: 276, height: 140, initialize: function () { $(".d-buttons input:first").css({ "color": "#ffffff", "background": "#428bca", "border-color": "#357ebd" }); }, button: [{ value: "确定", callback: function () { // alert($('input[name="expradio"]:checked').val()); var listForm=$("#export"); listForm.attr("action","${ctx}/AnalysisSupport/ServiceFeature/"+$('input[name="expradio"]:checked').val()+"?picStr="+picStr); listForm.submit(); listForm.attr("action","#"); } },{ value: "取消", callback: function () {} }], lock: false }); }); </script> <script> </script> </body> </html>