var oFilter={}, iFilter, aMonth=[], oTab={}; var aProduct=[], aHospital=[], aDealer=[], aRep=[], iHospital; var iPeriod=0, aPeriod=[ {code:"MTH", name:"上个月", month:[11]}, {code:"QTR", name:"上å£åº¦", month:[7,8,9]}, {code:"QTD", name:"当å£ç´¯è®¡", month:[10, 11]}, {code:"RQ", name:"滚动å£åº¦", month:[9,10,11]}, {code:"YTD", name:"当年累计", month:[1,2,3,4,5,6,7,8,9,10,11]}, {code:"MAT", name:"滚动年度", month:[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]} ]; $(document).ready( onDocumentReady ); function onDocumentReady() { pageInit(showDashboard); loadMaster(); } function loadMaster() { jsonRequest("sales", "load_master", {}, onMasterResponse, "æ£åœ¨èŽ·å–æ•°æ®â€¦è¯·ç¨å€™"); } function onMasterResponse(res) { aProduct=res.product_list; aHospital=res.hospital_list; aDealer=res.dealer_list; aRep=res.rep_list; oFilter['product']=aProduct; oFilter['hospital']=aHospital; oFilter['dealer']=aDealer; } /**************** FILTER ****************/ function showFilter() { if (!iFilter) { filterDate(); filterInit("product", "产å“"); filterInit("hospital", "医院"); filterInit("dealer", "ç»é”€å•†"); filterSwitch("date"); } pageGo("filter"); } function filterSwitch(filter) { tabSwitch("filter", filter); if (iFilter) { $("#filter_"+iFilter).hide(); } iFilter=filter; $("#filter_"+iFilter).show(); } function filterInit(series, title) { var html=""; html+=div("div_filter_on", div("div_filter_code", "所有")+ div("div_filter_name", title)+ div("div_filter_mark_on", "", "", series+"_mark_all"), "filterToggle('"+series+"','all')", series+"_filter_all"); for (var i=0; i<oFilter[series].length; i++) { html+=div("div_filter_off", div("div_filter_code", oFilter[series][i].code)+ div("div_filter_name", oFilter[series][i].name)+ div("div_filter_all_on", "", "", series+"_mark_"+i), "filterToggle('"+series+"','"+i+"')", series+"_filter_"+i); } $("#filter_"+series).html(html); $("#"+series+"_filter_all").data("status", "on"); for (var i=0; i<oFilter[series].length; i++) { $("#"+series+"_filter_"+i).data("status", "on"); } } function filterToggle(series, index) { var filter=$("#"+series+"_filter_"+index); var b=filter.data("status"); b=(b=="on")?"off":"on"; filter.data("status", b); filter.attr("class", "div_filter_"+b); $("#"+series+"_mark_"+index).attr("class", "div_filter_mark_"+b); if (index=="all") { for (var i=0; i<oFilter[series].length; i++) { filter=$("#"+series+"_filter_"+i); filter.data("status",b); filter.attr("class", "div_filter_off"); $("#"+series+"_mark_"+i).attr("class", "div_filter_all_"+b); } } else { var all=$("#"+series+"_filter_all"); all.data("status", "off"); all.attr("class", "div_filter_off"); $("#"+series+"_mark_all").attr("class", "div_filter_mark_off"); } } function filterDate() { var html="", group="", m0=11; if (aMonth.length==0) { aMonth=[m0]; } for (var i=0; i<aPeriod.length; i++) { group+=div("div_date_item width_50p", div("div_date_period div_date_"+(i==iPeriod?"on":"off"), aPeriod[i].name+" "+aPeriod[i].code, "setPeriod("+i+")")); } html+=div("div_date_label", "常用时间段"); html+=div("div_date_group", group); group=""; for (var q=0; q<=4; q++) { var qb=(q*3<=m0)?((aMonth.indexOf(q*3)>=0 && aMonth.indexOf(q*3-1)>=0 && aMonth.indexOf(q*3-2)>=0)?"on":"off"):"none"; var qtr=q>0?q+"å£åº¦":"去年"+(q+4)+"å£åº¦"; group+=div("div_date_item width_40p", div("div_date_quarter div_date_"+qb, qtr, "setQuarter("+q+")")); for (var m=q*3-2; m<=q*3; m++) { var mb=(m<=m0)?(aMonth.indexOf(m)>=0?"on":"off"):"none"; var mth=m>0?m:m+12; group+=div("div_date_item width_20p", div("div_date_month div_date_"+mb, mth, "setMonth("+m+")")); } } html+=div("div_date_label", "å£åº¦-月份"); html+=div("div_date_group", group); $("#filter_date").html(html); } function setPeriod(i) { iPeriod=i; aMonth=aPeriod[iPeriod].month; filterDate(); } function setMonth(m) { aMonth=[m]; iPeriod=null; filterDate(); } function setQuarter(q) { aMonth=[q*3-2, q*3-1, q*3]; iPeriod=null; filterDate(); } /*********** CHART *********/ function optionItem(series, labels, fx) { var html=""; oSwitch[series]=oSwitch[series] || "0"; for (var i=0; i<labels.length; i++) { var c=(i==oSwitch[series])?"div_switch_on":"div_switch_off"; if (i==0) { c+=" div_switch_left"; } if (i==labels.length-1) { c+=" div_switch_right"; } html+=div(c, labels[i], "toggleSwitch('"+series+"','"+i+"'); "+fx, "switch_"+series+"_"+i); } return div("div_option_item", html); } function tabSwitch(series, active) { var prev=oTab[series]; if (prev != null) { $("#tab_"+series+"_"+prev).attr("class", "div_tab_off"); } oTab[series]=active; $("#tab_"+series+"_"+active).attr("class", "div_tab_on"); showVisualAid(); } function showDashboard() { menuSwitch("dashboard"); showDashboard1(); } function showDashboard1() { var option=initChart("gauge", "综åˆè¾¾æˆçއ", "2015-Q3"); option.series=[{name:"è¾¾æˆçއ", data: [128], tooltip: {valueSuffix: '%'} }]; $("#chart_dashboard").highcharts(option); tabSwitch("dashboard","1"); } function showDashboard2() { var option=initChart("waterfall", "åŒæœŸæ¯”较", "2015-Q3"); var data=[ {name:"去年", y:80, color:option.colors[1]}, {name:"增长", y:70, color:option.colors[2]}, {name:"实际", y:150, isIntermediateSum:true, color:option.colors[0]}, {name:"è¶…é¢", y:-30, color:option.colors[4]}, {name:"æŒ‡æ ‡", y:120, isSum:true, color:option.colors[3]} ]; option.series[0].data=data; $("#chart_dashboard").highcharts(option); tabSwitch("dashboard",2); } function showDashboard3() { var indicator=optionItem("dashboard3_indicator", ["æŒ‡æ ‡","销é‡"], "showDashboard3();"); $("#option_dashboard").html(indicator); var option=initChart("pie", "å„城市销é‡è´¡çŒ®", "2015-Q3"); option.series.name="城市比例"; option.series[0].data.push({name:"æå·ž", y:15}); option.series[0].data.push({name:"宿³¢", y:14}); option.series[0].data.push({name:"温州", y:13}); option.series[0].data.push({name:"ç»å…´", y:12}); option.series[0].data.push({name:"æ¹–å·ž", y:11}); option.series[0].data.push({name:"嘉兴", y:10}); option.series[0].data.push({name:"京åŽ", y:9}); option.series[0].data.push({name:"衢州", y:8}); option.series[0].data.push({name:"å°å·ž", y:7}); option.series[0].data.push({name:"å…¶ä»–", y:1}); if (oSwitch['dashboard3_indicator']=="1") { option.series[0].data[0].y=8; option.series[0].data[1].y=6; } $("#chart_dashboard").highcharts(option); tabSwitch("dashboard",3); } function showDashboard4() { var indicator=optionItem("dashboard4_indicator", ["æŒ‡æ ‡","销é‡"], "showDashboard4();"); $("#option_dashboard").html(indicator); var option=initChart("column", "å„城市å“ç‰Œé”€é‡æ¯”例", "2015-Q3"); option.xAxis.categories=["æå·ž", "宿³¢", "温州", "ç»å…´", "æ¹–å·ž", "嘉兴", "京åŽ", "衢州"]; option.tooltip.pointFormat="<span style='color:{series.color}'>{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>"; option.tooltip.shared=true; option.plotOptions.column={stacking:"percent"}; option.series.push({name:"立普妥", data:[5,3,4,7,2,5,4,3]}); option.series.push({name:"åšè·¯å®š", data:[3,4,7,2,5,4,3,5]}); option.series.push({name:"波立维", data:[4,7,2,5,4,3,5,3]}); option.series.push({name:"希罗达", data:[7,2,5,4,3,5,3,4]}); if (oSwitch['dashboard4_indicator']=="1") { option.series[0].data=[1,1,1,1,1,1,1,1]; } $("#chart_dashboard").highcharts(option); tabSwitch("dashboard",4); } function showTrend() { menuSwitch("trend"); showTrend1(); } function showTrend1() { var period=optionItem("trend1_period", ["å£åº¦", "月度"], "showTrend1();"); var measure=optionItem("trend1_unit", ["æ•°é‡","金é¢"], "showTrend1();"); $("#option_trend").html(period+measure); var option=initChart(null, "销é‡ã€è¾¾æˆçŽ‡å’Œå¢žé•¿çŽ‡è¶‹åŠ¿", "2015 全年"); option.yAxis=[]; var unit=(oSwitch['trend1_unit']=="1")?"万元":"åƒç›’"; option.yAxis[0]={title:{text:null}, labels:{format:"{value}"+unit}, max:125}; option.yAxis[1]={title:{text:null}, labels:{format:"{value}%"}, max:125, opposite:true}; if (oSwitch['trend1_period']=="1") { option.xAxis.categories=["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]; option.series.push({name:"销é‡", type:"column", data:[70, 70, 60, 80, 90, 100, 95, 70, 75, 105, 120, 105]}); option.series.push({name:"è¾¾æˆçއ", type:"spline", yAxis:1, data:[90, 90, 80, 100, 110, 105, 80, 70, 70, 95, 105, 95]}); option.series.push({name:"增长率", type:"spline", yAxis:1, data:[10, 12, 15, 20, 30, 25, 15, 10, 10, 20, 15, 30]}); } else { option.xAxis.categories=["Q1", "Q2", "Q3", "Q4"]; option.series.push({name:"销é‡", type:"column", data:[70, 70, 60, 80]}); option.series.push({name:"è¾¾æˆçއ", type:"spline", yAxis:1, data:[90, 90, 80, 100]}); option.series.push({name:"增长率", type:"spline", yAxis:1, data:[10, 12, 15, 20]}); } $("#chart_trend").highcharts(option); tabSwitch("trend",1); } function showTrend2() { var period=optionItem("trend2_period", ["å£åº¦", "月度"], "showTrend2();"); $("#option_trend").html(period); var option=initChart("spline"); option.title.text="æŒ‡æ ‡è¾¾æˆçŽ‡è¶‹åŠ¿"; option.subtitle.text="按产å“细分"; option.yAxis.title={text:null}; if (oSwitch['trend2_period']=="1") { option.xAxis.categories=["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]; option.series.push({name:"立普妥", data:[100, 90, 110, 100, 140, 120, 110, 150, 130, 140, 160, 180]}); option.series.push({name:"åšè·¯å®š", data:[80, 85, 75, 60, 60, 60, 70, 90, 110, 100, 110, 120]}); option.series.push({name:"波立维", data:[120, 160, 140, 120, 90, 60, 60, 70, 50, 40, 30, 20]}); option.series.push({name:"希罗达", data:[50, 60, 70, 100, 120, 150, 130, 100, 90, 100, 120, 110]}); } else { option.xAxis.categories=["Q1", "Q2", "Q3", "Q4"]; option.series.push({name:"立普妥", data:[100, 120, 130, 160]}); option.series.push({name:"åšè·¯å®š", data:[80, 60, 90, 110]}); option.series.push({name:"波立维", data:[140, 90, 60, 30]}); option.series.push({name:"希罗达", data:[60, 150, 100, 120]}); } $("#chart_trend").highcharts(option); tabSwitch("trend",2); } function showTrend3() { $("#option_trend").empty(); var option=initChart("column", "åŽ»å¹´åŒæœŸé”€é‡æ¯”较", "2015 vs 2014"); option.chart.options3d={enabled:true, alpha:15, beta:20, depth:70}; option.plotOptions={column:{depth: 25}}; option.xAxis.categories=["Q1", "Q2", "Q3", "Q4"]; option.series.push({name:"åŽ»å¹´åŒæœŸ", data:[100, 120, 130, 160], lineWidth:1}); option.series.push({name:"今年实际", data:[105, 130, 160, 100]}); option.colors=["rgba(255,160,60,0.8)", "rgba(0,160,255,0.8)"]; $("#chart_trend").highcharts(option); tabSwitch("trend",3); } function showTrend4() { var period=optionItem("trend4_period", ["å£åº¦", "月度"], "showTrend4();"); $("#option_trend").html(period); var option=initChart("areaspline", "销é‡è¶‹åŠ¿", "2015 1月~12月"); option.plotOptions.areaspline={fillOpacity:0.3}; if (oSwitch['trend4_period']=="1") { option.xAxis.categories=["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]; option.series.push({name:"总销é‡", data:[70, 70, 60, 80, 90, 100, 95, 70, 75, 105, 120, 105]}); option.series.push({name:"立普妥", data:[10, 11, 8, 12, 14, 15, 16, 18, 20, 15, 17, 12]}); } else { option.xAxis.categories=["Q1", "Q2", "Q3", "Q4"]; option.series.push({name:"总销é‡", data:[200, 270, 240, 330]}); option.series.push({name:"立普妥", data:[29, 41, 54, 44]}); } $("#chart_trend").highcharts(option); tabSwitch("trend",4); } function showTeam() { menuSwitch("team"); showTeam1(); } function showTeam1() { var territory=optionItem("team1_territory", ["最新辖区", "历å²è¾–区"], "showTeam1();"); $("#option_team").html(territory); var option=initChart("bubble", "æˆå‘˜é”€é‡ã€è¾¾æˆçއã€å¢žé•¿çއ", "2015 Q3"); option.xAxis.title.text="è¾¾æˆçއ(%)"; option.yAxis.title.text="增长率(%)"; for (var i=0; i<5; i++) { option.series[i].name=aRep[i].name; } if (oSwitch['team1_territory']=="1") { option.series[0].data=[[115, 10, 20]]; option.series[1].data=[[95, 5, 15]]; option.series[2].data=[[90, 15, 10]]; option.series[3].data=[[115, 15, 12]]; option.series[4].data=[[105, 20, 18]]; } else { option.series[0].data=[[110, 20, 20]]; option.series[1].data=[[90, 0, 15]]; option.series[2].data=[[80, 20, 10]]; option.series[3].data=[[100, 10, 12]]; option.series[4].data=[[120, 5, 18]]; } option.series[5].name="å…¶ä»–"; option.series[5].data=[[80, 0, 1]]; $("#chart_team").highcharts(option); tabSwitch("team",1); } function showTeam2() { $("#option_team").empty(); var option=initChart("pie", "团队æˆå‘˜é”€é‡è´¡çŒ®æ¯”例", "2015-Q3"); option.series.name="æˆå‘˜é”€é‡æ¯”例"; option.series[0].data.push({name:aRep[0].name, y:20}); option.series[0].data.push({name:aRep[1].name, y:25}); option.series[0].data.push({name:aRep[2].name, y:30}); option.series[0].data.push({name:aRep[3].name, y:15}); option.series[0].data.push({name:aRep[4].name, y:10}); $("#chart_team").highcharts(option); tabSwitch("team",2); } function showTeam3() { $("#option_team").empty(); var option=initChart("area", "团队æˆå‘˜é”€é‡è¶‹åŠ¿", "2015 Q1-Q4"); option.xAxis.categories=["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]; option.xAxis.tickmarkPlacement="on"; option.plotOptions.area={ stacking:"normal", lineWidth:1, lineColor:"rgba(160,160,160,0.8)", marker:{enabled:false} }; for (var i=0; i<5; i++) { var d=[]; for (var j=0; j<12; j++) { d.push(Math.floor(Math.random()*10+20)); } option.series.push({name:aRep[i].name, data:d}); } $("#chart_team").highcharts(option); tabSwitch("team",3); } function showTeam4() { $("#option_team").empty(); var option=initChart("column"); option.title.text="æŒ‡æ ‡å’Œå®žé™…é”€é‡è¶‹åŠ¿"; option.subtitle.text="2015 Q1~Q4"; for (var i=0; i<5; i++) { option.xAxis.categories[i]=aRep[i].name; } option.yAxis.title={text:null}; option.series.push({name:"æŒ‡æ ‡", color:"rgba(120, 220, 60, 0.5)", data:[100, 120, 130, 160, 140], pointPadding:-0.3, pointPlacement:0.15}); option.series.push({name:"实际", color:"rgba(0, 160, 255, 1)", data:[105, 90, 160, 120, 140], pointPadding:0.2, pointPlacement:-0.15}); $("#chart_team").highcharts(option); tabSwitch("team",4); } /*********** VIEW **********/ function loadSalesTimeline() { var title=["å£åº¦", "月份", "æŒ‡æ ‡", "销é‡", "è¾¾æˆ"]; var width=["20%", "20%", "20%", "20%", "18%"]; $("#div_sales_timeline_field").html(field(title, width)); var html=""; for (var q=1; q<=4; q++) { var targetSum=0, salesSum=0; for (var m=q*3-2; m<=q*3; m++) { var target=Math.floor(Math.random()*10)+20; var sales=m<=8?(Math.floor(Math.random()*10)+20):0; var ach=Math.floor(sales*100/target); var color=(ach<=90)?"#C00000":(ach>=110?"#00A000":"#606060"); html+=div("div_row", cell("","20%", "#0090FF")+ cell(m+"月份", "20%")+ cell(target+",000", "20%", "right")+ cell(sales+(sales?",000":""), "20%", "right", color)+ cell(ach+(ach?"%":""), "18%", "right", color)); targetSum+=target; salesSum+=sales; } var ach=Math.floor(salesSum*100/targetSum) || ""; var color=(ach<=90)?"#C00000":(ach>=110?"#00A000":"#606060"); html+=div("div_row_blue", cell(q+"å£åº¦", "20%")+ cell("汇总", "20%")+ cell(targetSum+",000", "20%", "right")+ cell(salesSum+",000", "20%", "right", color)+ cell(ach+(ach?"%":""), "18%", "right", color)); } $("#div_sales_timeline_sheet").html(html); } function showHospital() { menuSwitch("hospital"); loadSalesHospital(); } function loadSalesHospital() { var width=["50%", "18%", "18%", "12%"]; var align=["left", "right", "right", "right"]; var title=["医院", "æŒ‡æ ‡", "销é‡", "è¾¾æˆ"]; var f=field(title, width); $("#div_sales_hospital_field").html(f); var html=""; for (var i=0; i<aHospital.length; i++) { var target=Math.floor(Math.random()*50)+75, sales=Math.floor(Math.random()*50)+75,ach=Math.floor(sales*100/target); var color=(ach<=90)?"#C00000":(ach>=110?"#00A000":"#606060"); html+=div("div_row", cell(aHospital[i].code+"-"+aHospital[i].name,"50%", "left")+ cell(target+",000", "18%", "right")+ cell(sales+",000", "18%", "right", color)+ cell(ach+"%", "12%", "right", color), "iHospital="+i+"; showSalesRaw()"); } $("#div_sales_hospital_sheet").html(html); } function showTimeline() { menuSwitch("timeline"); loadSalesTimeline(); } function showSalesRaw() { pageGo("raw"); loadSalesRaw(); } function loadSalesRaw() { var width=["25%", "20%", "40%", "15%"]; var title=["日期", "产å“", "ç»é”€å•†", "æ•°é‡"]; $("#div_sales_raw_field").html(field(title, width)); var date=["2015-10-15", "2015-10-18", "2015-10-21", "2015-10-28", "2015-10-31"]; var html=""; for (var i=0; i<5; i++) { var n=Math.floor(Math.random()*20+5)*10; var j=Math.floor(Math.random()*aProduct.length); var k=Math.floor(Math.random()*aDealer.length); html+=div("div_row", cell(date[i],"25%")+ cell(aProduct[j].name, "20%", "left")+ cell(aDealer[k].name, "40%", "left")+ cell(n+"ç›’", "15%", "right"), "showSalesRawDetail('"+date[i]+"','"+aProduct[j].name+"','"+aDealer[k].name+"',"+n+")"); } $("#div_sales_raw_sheet").html(html); } function showSalesRawDetail(date, product, dealer, qty) { var label=["ç¼–å·", "æµå‘日期", "录入日期", "产å“", "ç»é”€å•†", "医院", "æ•°é‡", "金é¢", "状æ€"]; var content=["R1022A", date, date, product, dealer, aHospital[iHospital].name, qty+"ç›’", qty*25+"å…ƒ", "æ£å¸¸"]; var s=property(label, content); $("#div_sales_raw_property").html(s); pageGo("raw_detail"); }