dashboard.asp 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. <!--#include file="Conn.asp"--><%Checklogin()%>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>管理区域</title>
  7. <link rel="stylesheet" href="css/common.css" type="text/css" />
  8. <link rel="stylesheet" href="css/alert.css" type="text/css" />
  9. <script language="javascript" src="system/js/jquery-1.7.2.min.js"></script>
  10. <script type="text/javascript" src="js/js.js"></script>
  11. <script>  
  12. //绘制饼图  
  13. function drawCircle(canvasId, data_arr, color_arr, text_arr){  
  14. var c = document.getElementById(canvasId);  
  15. var ctx = c.getContext("2d");  
  16. var ctxw = c.getContext("2d"); 
  17. var radius =125; //半径  
  18. var ox = radius + 80, oy = radius + 20; //圆心  
  19. var width = 10, height = 10; //图例宽和高  
  20. var posX = 450, posY = 50;   //  
  21. var textX = posX + width + 5, textY = posY + 10;  
  22. var startAngle = 0; //起始弧度  
  23. var endAngle = 0;   //结束弧度  
  24. for (var i = 0; i < data_arr.length; i++)  
  25.   {  
  26.    //绘制饼图  
  27.    endAngle = endAngle + data_arr[i] * Math.PI * 2; //结束弧度  
  28.    ctx.fillStyle = color_arr[i]; 
  29.    ctx.beginPath();  
  30.    ctx.moveTo(ox, oy); //移动到到圆心  
  31.    ctx.arc(ox, oy, radius, startAngle, endAngle, false);  
  32.    ctx.closePath();  
  33.    ctx.fill();  
  34. startAngle = endAngle; //设置起始弧度  
  35.   
  36.    //绘制比例图及文字  
  37.    ctx.fillStyle = color_arr[i];  
  38.    ctx.fillRect(posX, posY + 20 * i, width, height);  
  39.    ctx.moveTo(posX, posY + 20 * i);  
  40.    ctx.font = 'bold 12px 微软雅黑';    //斜体 30像素 微软雅黑字体  
  41.    ctx.fillStyle = "#666666";  
  42. var icount=100 * data_arr[i];
  43.    var percent = text_arr[i] + ":" + icount.toFixed(2)+ "%";  
  44.    ctx.fillText(percent, textX, textY + 20 * i);  
  45. }  
  46.    ctxw.fillStyle ="#FFFFFF"; 
  47.    ctxw.beginPath();  
  48.    ctxw.moveTo(ox, oy); //移动到到圆心  
  49.    ctxw.arc(ox, oy, 90, 0, 2* Math.PI, false);  
  50.    ctxw.closePath();  
  51.    ctxw.fill(); 
  52. }</script>  
  53. </head>
  54. <body class="clear">
  55. <!--#include file="panel.asp"-->
  56. <div id="man_zone">
  57. <div class="dashboard">
  58. <h1 class="dashboardHead">数据看板</h1>
  59. <%Set Rs=Server.CreateObject("ADODB.RecordSet")
  60. Rs.Open "select count(DISTINCT cs_code) as CustomerTotal from customer where cs_belong="&Session("employee_id"),conn,1,1
  61. tn=Rs("customerTotal")
  62. Rs.Close
  63. Rs.Open "select count(DISTINCT cs_code) as CustomerTotal from customer where cs_deal=3 and cs_belong="&Session("employee_id"),conn,1,1
  64. tdn=Rs("customerTotal")
  65. Rs.Close
  66. Rs.Open "Select businessType,count(DISTINCT cs_code) as cc from customer left Join clientType on customer.cs_type=clientType.id where cs_belong="&Session("employee_id")&" Group by(businessType)",conn,1,1
  67. Do while Not Rs.bof and Not Rs.eof
  68. data_arr1=data_arr1&FormatNumber(Rs("cc")/tn,-1,-1)&","
  69. text_arr1=text_arr1&Rs("businessType")&","
  70. Rs.moveNext
  71. loop
  72. Rs.close
  73. %>
  74. <input type="hidden" id="data_arr1" value="<%=left(data_arr1,len(data_arr1)-1)%>">
  75. <input type="hidden" id="text_arr1" value="<%=left(text_arr1,len(text_arr1)-1)%>">
  76. <div class="dashPanel1">
  77. <h3>客户类型</h3>
  78.    <canvas id="canvas_circle" width="720" height="360">浏览器不支持canvas 
  79.            </canvas>  
  80. </div>
  81. <%
  82. Rs.Open "Select cs_deal,count(DISTINCT cs_code) as cc from customer where cs_belong="&Session("employee_id")&" Group by(cs_deal) order by cs_deal desc",conn,1,1
  83. Do while Not Rs.bof and Not Rs.eof
  84. data_arr2=data_arr2&FormatNumber(Rs("cc")/tn,-1,-1)&","
  85. Rs.moveNext
  86. loop
  87. Rs.close
  88. %>
  89. <input type="hidden" id="data_arr2" value="<%=left(data_arr2,len(data_arr2)-1)%>">
  90. <input type="hidden" id="text_arr2" value="成交,明确需求,背景调查,无响应">
  91. <div class="dashPanel1">
  92. <h3>成交比例</h3>
  93.    <canvas id="canvas_circle2" width="720" height="360">浏览器不支持canvas 
  94.            </canvas>  
  95. </div>
  96. <%
  97. Rs.Open "Select ch_name,count(cs_from) as cc from customer Left Join qudao on customer.cs_from=qudao.id where cs_belong="&Session("employee_id")&" Group by(ch_name)",conn,1,1
  98. Do while Not Rs.bof and Not Rs.eof
  99. data_arr3=data_arr3&FormatNumber(Rs("cc")/tn,-1,-1)&","
  100. text_arr3=text_arr3&Rs("ch_name")&","
  101. Rs.moveNext
  102. loop
  103. Rs.close
  104. %>
  105. <input type="hidden" id="data_arr3" value="<%=left(data_arr3,len(data_arr3)-1)%>">
  106. <input type="hidden" id="text_arr3" value="<%=left(text_arr3,len(text_arr3)-1)%>">
  107. <div class="dashPanel1">
  108. <h3>我的客户来源</h3>
  109.    <canvas id="canvas_circle3" width="720" height="360">浏览器不支持canvas 
  110.            </canvas>  
  111. </div>
  112. <% Rs.Open "select top 9 countryName,count(DISTINCT cs_code) as cc from customer Left Join country on customer.cs_country=country.id where cs_deal=3 and cs_belong="&Session("employee_id")&" Group BY(countryName) Order by cc DESC",conn,1,1
  113. tp=1
  114. Do while Not Rs.bof and Not Rs.eof
  115. data_arr5=data_arr5&FormatNumber(Rs("cc")/tdn,-1,-1)&","
  116. text_arr5=text_arr5&Rs("countryName")&","
  117. tp=tp-FormatNumber(Rs("cc")/tdn,-1,-1)
  118. Rs.moveNext
  119. loop
  120. Rs.close
  121. %>
  122. <input type="hidden" id="data_arr5" value="<%=data_arr5&tp%>">
  123. <input type="hidden" id="text_arr5" value="<%=text_arr5&"其他"%>">
  124. <div class="dashPanel1">
  125. <h3>已成交客户分布(Top10)</h3>
  126.    <canvas id="canvas_circle5" width="720" height="360">浏览器不支持canvas</canvas>  
  127. </div>
  128. <% Rs.Open "select top 9 countryName,count(DISTINCT cs_code) as cc from customer Left Join country on customer.cs_country=country.id where cs_belong="&Session("employee_id")&" Group BY(countryName) Order by cc DESC",conn,1,1
  129. tp=1
  130. Do while Not Rs.bof and Not Rs.eof
  131. data_arr4=data_arr4&FormatNumber(Rs("cc")/tn,-1,-1)&","
  132. text_arr4=text_arr4&Rs("countryName")&","
  133. tp=tp-FormatNumber(Rs("cc")/tn,-1,-1)
  134. Rs.moveNext
  135. loop
  136. Rs.close
  137. %>
  138. <input type="hidden" id="data_arr4" value="<%=data_arr4&tp%>">
  139. <input type="hidden" id="text_arr4" value="<%=text_arr4&"其他"%>">
  140. <div class="dashPanel1">
  141. <h3>客户分布(Top10)</h3>
  142.    <canvas id="canvas_circle4" width="720" height="360">浏览器不支持canvas</canvas>  
  143. </div>
  144. <%Set Rs=Nothing:Conn.Close:Set Conn=Nothing%>
  145. </div>
  146. <script>
  147. function init() {  
  148. //客户类型
  149.    var data_arr = $("#data_arr1").val().split(",");  
  150.    var color_arr = ["#00FF21", "#FFAA00", "#00AABB", "#FF4400","#009942","#02a0e9","#0168b7","#930784","#e5007f","#e50150","#ef0030","#eb6100","#f49600"];  
  151.    var text_arr = $("#text_arr1").val().split(","); ;  
  152. //成交情况
  153.    var data_arr2 = $("#data_arr2").val().split(",");  
  154.    var text_arr2 = $("#text_arr2").val().split(",");   
  155.    var data_arr3 = $("#data_arr3").val().split(",");  
  156.    var text_arr3 = $("#text_arr3").val().split(",");  
  157.    var data_arr4 = $("#data_arr4").val().split(",");  
  158.    var text_arr4 = $("#text_arr4").val().split(",");  
  159.    var data_arr5 = $("#data_arr5").val().split(",");  
  160.    var text_arr5 = $("#text_arr5").val().split(",");  
  161.    drawCircle("canvas_circle", data_arr, color_arr, text_arr);  
  162.    drawCircle("canvas_circle2", data_arr2, color_arr, text_arr2); 
  163.    drawCircle("canvas_circle3", data_arr3, color_arr, text_arr3); 
  164.    drawCircle("canvas_circle4", data_arr4, color_arr, text_arr4); 
  165.    drawCircle("canvas_circle5", data_arr5, color_arr, text_arr5); 
  166. }  
  167.    window.onload = init; 
  168. </script>
  169. </div>
  170. </body>
  171. </html>