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