<%@ 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"> <!-- nvd3画图 --> <link href="${ctx}/static/nvd3/nv.d3.css" rel="stylesheet" type="text/css" /> <script src="${ctx}/static/nvd3/lib/d3.v3.js"></script> <script src="${ctx}/static/nvd3/nv.d3.test.js"></script> <!-- 所有js导出所需 --> <script type="text/javascript" src="${ctx}/static/js/canvg.js"></script> <style type="text/css"> .div-inline { display: inline-block; margin-right: 10px; padding-left: 0px; margin-bottom: 0; font-weight: normal; vertical-align: middle; cursor: pointer; } .div-inline+.div-inline { margin-top: 0; margin-left: -13px; } </style> </head> <body> <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><a href="${ctx}/AnalysisSupport/ServiceFeature">地市热点分析</a> </li> <li class="active"><a id="a_profile" href="#profile" data-toggle="tab">渠道热点分析</a> </li> </ul> </div> <div class="section"> <div class="tab-content"> <!-- ------------------------------------------------ 渠道热点 ------------------------------------------------ --> <div class="tab-pane fade in active" id="profile"> <div class="row me-row"> <div id="slidePushMenus2" class="cbp-spmenu-push"> <div class="slideMenu" id="cbp-spmenu-s2" style=""> <div class="form"> <tags:YWTZ_City_PeriodTag /> <br> <tags:Public_ProvinceTag /> <br> <tags:YWTZ_Channel_Bus_KpiTag /> <br> <button type="button" class="btn btn-primary" onclick="newdiv()">提交</button> <button type="button" type="reset" class="btn btn-warning" onclick="reset2()">重置</button> </div> </div> <div class="main col-xs-12"> <div id="mainm2" class="mainm"></div> <div class="content clearfix"> <div class="block clearfix"> <button id="showLeftPush2" class="menu-trigger btn btn-default" onclick="toggleMenu('slidePushMenus2')"> <span class="glyphicon glyphicon-list"></span> </button> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1"> <div class="slide-menu-tags"> <span id="bqds1" class="label label-info" data-placement="bottom">关键指标直采</span> <span id="bqtime1" class="label label-info" data-placement="bottom">最近一个月</span> <span id="bqprovince1" class="label label-info" data-placement="bottom" >全国</span> <span id="bqchannel1" class="label label-info" data-placement="bottom"></span> <span id="bqbusiness1" class="label label-info" data-placement="bottom"></span> <span id="bqkpi1" class="label label-info" data-placement="bottom"></span> </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="row"> <div class="col-xs-12"> <div class="panel panel-default"> <div class="panel-heading"> <span>全国各渠道业务办理量统计</span> </div> <div class="panel-body"> <div id="qg" class="col-xs-12"> <div name="loading" class="loading"><img src="${ctx}/static/images/loading.gif"/></div> <iframe id="channel_qg" name="channel_qg" class='channelqg' style="height:700px;" scrolling="no" frameborder="0" ></iframe> </div> </div> </div> </div> </div> <form id="export" action="#" method="post"></form> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <script type="text/javascript" src="${ctx}/static/js/publicLog.js"></script> <script type="text/jscript"> function newdiv(){ if(getProvinceCheckedValues().length*getChannelCheckedValues().length*getBusinessCheckedValuesId().length*getKpiCheckedValuesId().length==0){ $.alert('选择不能为空!'); }else{ if(getPeriodStr()==""){ $.alert('时间不能为空!'); }else{ $("#channel_qg").attr("src", document.getElementById("channel_qg").value+"&ProvinceTag="+getProvinceCheckedValuesString()+"&ChannelTag="+getChannelCheckedValuesString()+"&PeriodTag=" + getPeriodString()+"&BusinessTag="+getBusinessCheckedValuesId()+"&KpiTag="+getKpiCheckedValuesId()); $('#bqprovince1').text("省份").attr('data-original-title',getProvinceCheckedTitles()).append($("<span class='badge'></span>").text(getProvinceCheckedValues().length)).tooltip(); $('#bqchannel1').text("渠道").attr('data-original-title',getChannelCheckedTitles()).append($("<span class='badge'></span>").text(getChannelCheckedValues().length)).tooltip(); $('#bqbusiness1').text("业务").attr('data-original-title',getBusinessCheckedValuesTitle()).append($("<span class='badge'></span>").text(getBusinessCheckedValuesId().length)).tooltip(); $('#bqkpi1').text("指标").attr('data-original-title',getKpiCheckedValuesTitle()).append($("<span class='badge'></span>").text(getKpiCheckedValuesId().length)).tooltip(); $('#bqtime1').text("时间范围").attr('data-original-title',getPeriodStr()).tooltip(); publicLog("ChannelrdAnalysis"); toggleMenu('slidePushMenus2'); } } } function reset2() { initDate(); ProvinceReset(); channelReset(); } </script> <script type="text/jscript"> //added by guo xuan function checkBusinessAndKpi(){ if(getBusinessCheckedValuesIdString() == "" || getBusinessCheckedValuesIdString() == null){}else{ businessAllId = getBusinessCheckedValuesIdString(); } if(getKpiCheckedValuesIdString() == "" || getKpiCheckedValuesIdString() == null){ }else{ kpiAllId = getKpiCheckedValuesIdString(); } } $(document).ready(function() { checkBusinessAndKpi(); initDate(); $('#bqchannel1').text("渠道").tooltip({title:getChannelCheckedTitles()}); $('#bqbusiness1').text("业务").tooltip({title:getBusinessCheckedValuesTitle()}); $('#bqkpi1').text("指标").tooltip({title:getKpiCheckedTitlesString()}); document.getElementById("channel_qg").value = "${biserver_config}&path=analysissupport&action=YWTZ_channel.xaction&wrapper=false&driLink=toDrill&driEnable=true&width="+iframeWidth*0.99+"&height=480" $("#channel_qg").attr("src", document.getElementById("channel_qg").value+"&ChannelTag="+getChannelCheckedValuesString()+"&BusinessTag="+businessAllId+"&KpiTag="+kpiAllId+"&PeriodTag="+getPeriodString()); }); var iframeWidth=790, iframeHeight=0;//iframe高度 var businessAllId = "0"; var kpiAllId = "0"; //窗口自适应函数 $(/*window.onresize = */function(){ // iframeWidth=(document.body.clientWidth>1024)?(document.body.clientWidth-60)*0.72:660; // iframeHeight=(document.body.clientHeight>700)?document.body.clientHeight*0.17:115; //channel_qg刷新 for(var i=0;i<$('.channelqg').length;i++){ if($('.channelqg').eq(i).parent().find('.loading').length>0){ $('.channelqg').eq(i).parent().find('.loading').fadeIn("fast"); //显现loading图片 $('.channelqg').eq(i).load( function(){ $(this).parent().find('.loading').fadeOut("fast"); });//隐藏loading图片 } } }); function toDrill(category,param){ dialog_artDialog("全国各渠道业务办理量统计钻取","<div id='par' style='fon-size:24px;text-align:center;'>"+param+"</div><div id='dropDown'><svg style='height:540px;width:1200px'></svg></div>","1300px","600px"); var test = getPeriodString()+"&"+ category +"&"+param; console.log(test); $.ajax({ type : 'GET', contentType : 'application/json', url: encodeURI(encodeURI("${ctx}/AnalysisSupport/ChannelAnalysis/dropDetial/"+test+"/"+Date.parse(new Date()))), dataType : 'text', beforeSend: function(data) {}, success: function(data) { for ( var i = 0; i < data.length; i++) { if (data == '\"') { data = data.replace("\"", "\'"); } } data = eval("(" + data + ")"); if(data == "" || data == null){ $("#dropDown").html("暂无数据"); }else{ var min = 0; var tickMarks = [];var a1 = [],j=0, mi=[]; var List=data[1]; $("#dropDown svg").empty(); if("Y" == data[0]){ min = List[0];max = List[0],id=List.length/3; for(var i = 0 ;i<List.length;i=i+3){ if(i != 0){ if(List[i] == List[i-3]){ id--; } } a1[j] = []; a1[j][0] = List[i]; a1[j][1] = List[i+1]; a1[j][2] = List[i+2]; j++; } /* a1.forEach(function(d,i) { d.key = d[0]; d.x = d[1]; d.y = d[2]; }); */ //散点图 var margin = {top: 30, right: 50, bottom: 70, left: 50}; var width =1200 - margin.left - margin.right; var height = 480 - margin.top - margin.bottom; var padding = 20; var svg = d3.select("#dropDown svg") .attr("width", width + margin.left + margin.right+100) .attr("height", height + margin.top + margin.bottom+60) /* .attr("class", "box") */ .append("g") .attr("transform", "translate(" + (margin.left+70) + "," + margin.top + ")"); var x = d3.scale.ordinal() .domain( a1.map(function(d) { return d[0]; }) ) .rangeRoundBands([0 ,width-padding]); var xAxis = d3.svg.axis() .scale(x).orient("bottom").tickFormat(function(d) {return d3.time.format('%X')(new Date(d)) }).tickSize(-height, 0, 0); // the y-axis var y = d3.scale.linear() .domain([d3.min(a1,function (d){return parseFloat(d[2]);})-100, d3.max(a1,function (d){return parseFloat(d[2]);})+100]) .range([height , 0]); var yAxis = d3.svg.axis() .scale(y) .orient("left").tickSize(-width, 0, 0); // draw y axis svg.append("g") .attr("class", "y axis").attr({"stroke": "lightgrey","opacity": "0.7"}) .call(yAxis) .selectAll("text").attr({"stroke": "black","stroke-width":"0.5"}) ; // draw x axis svg.append("g") .attr("class", "x axis").attr({"stroke": "lightgrey","opacity": "0.7"}) .attr("transform", "translate(0," + (height) + ")") .call(xAxis) .selectAll("text").attr({"stroke": "black","stroke-width":"0.5"}) .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", function(d) { return "translate(-5,0)rotate(-90)" ;}); if(a1 == "" || a1 == null){ svg .append("text") // text label for the x axis .attr("x", (width/2) ) .attr("y", (height/2) ) .attr("dy", ".71em") .style("text-anchor", "end") .style("font-size", "16px") .text("暂无数据"); }else{ var color = d3.scale.category20(); svg.selectAll("circle") .data(a1) .enter() .append("circle") .attr("cx", function (d,i) { return x(d[0]); } ) .attr("cy", function(d,i) { return y(d[2]); }) .attr("r", 4).attr("fill",function(d,i){return color(d[1]);}) .attr("transform", "translate("+(width-padding)/(id*2)+",0)") .on("mouseover", function(d) { d3.select(this).attr("r", 6); d3.select(this).append("svg:title") .text(function(d) { return d3.time.format("%Y-%m-%d")(new Date(d[1]))+" "+d3.time.format('%X')(new Date(d[0])) +":"+d[2]; }); }).on("mouseout",function() { d3.select(this).attr("r", 4); }); /* svg.selectAll("circle").data(a1).append("svg:title") .text(function(d) { return d3.time.format('%X')(new Date(d[0]))+":"+d[2]; }); */ } //结束 /* nv.addGraph(function() { var chart = nv.models.scatterChart() .color(d3.scale.category10().range()) .size(1).sizeRange([50,50]) .forceX(min,max); chart.xAxis.tickValues(tickMarks).rotateLabels(-90).axisLabelDistance(4) .showMaxMin(false).tickFormat(function(d) { return d3.time.format('%X')(new Date(d)) }).tickPadding(0); chart.yAxis.showMaxMin(false); chart.tooltipContent(function(key, x, y) { return '<p>' + key + '</p>' + '<p>' + x + ' : ' + y + '</p>'; }); d3.select("#dropDown svg") .datum(Data(List)) .call(chart); nv.utils.windowResize(chart.update); return chart; }); */ }else{ nv.addGraph(function() { var chart = nv.models.lineChart() .showLegend(false) .useInteractiveGuideline(true); chart.xAxis .tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) }); chart.yAxis; d3.select("#dropDown svg") .datum(Data1(List)) .call(chart) ; nv.utils.windowResize(chart.update); return chart; }); } } $('#dropDown').parent().find('.loading').fadeOut("fast"); console.log(new Date()); } }); } //nvd3画图 function Data1(List) { var data = []; for (var i = 0; i < List.length; i++) { data.push({x: List[i][0], y: List[i][1]}); } return [ { values: data, key: '日期类' } ]; } function Data(List) { //# groups,# points per group var data = [], shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'], random = d3.random.normal(); var t = 0; for (i = 0; i < List.length/3; i++) { var tt = List[i*3+1]; if(i==0){ data.push({ key: List[i*3+1], values: [] }); for (j = 0; j < List.length; j=j+3) { if(List[j+1] == List[i*3+1]){ data[t].values.push({ x: List[j], y: List[j+2], size: 10, shape: shapes[j % 6] }); } } t++; }else{ if(List[i*3-2] != tt){ data.push({ key: List[i*3+1], values: [] }); for (j = 0; j < List.length; j=j+3) { if(List[j+1] == List[i*3+1]){ data[t].values.push({ x: List[j], y: List[j+2], size: 10, shape: shapes[j % 6] }); } } t++; } } } return data; } //导出报表 $(".exportData").click(function(){ //var temi = $(this).attr("id").charAt($(this).attr("id").length-1); // alert($("#tab"+temi).find("img").length); var picArr = new Array(); $("#tab1").find("iframe").each(function(){ // alert($(this).attr("id")); var tmpArr = new Array(); var tmpStr = $(window.frames[$(this).attr("id")].document).find("img").attr("src"); tmpArr = tmpStr.split("?image="); picArr.push(tmpArr[1]); }); var picStr = picArr.join(","); console.log(picStr); $.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/ChannelAnalysis/"+$('input[name="expradio"]:checked').val()+"?picStr="+picStr); listForm.submit(); listForm.attr("action","#"); } },{ value: "取消", callback: function () {} }], lock: false }); }); </script> </body> </html>