123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190 |
- <!--#include file="Conn.asp"--><%Checklogin()%>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>管理区域</title>
- <link rel="stylesheet" href="css/common.css" type="text/css" />
- <link rel="stylesheet" href="css/alert.css" type="text/css" />
- <script language="javascript" src="system/js/jquery-1.7.2.min.js"></script>
- <script type="text/javascript" src="js/js.js"></script>
- <script>
- //绘制饼图
- function drawCircle(canvasId, data_arr, color_arr, text_arr){
- var c = document.getElementById(canvasId);
- var ctx = c.getContext("2d");
- var ctxw = c.getContext("2d");
- var radius =125; //半径
- var ox = radius + 80, oy = radius + 20; //圆心
- var width = 10, height = 10; //图例宽和高
- var posX = 450, posY = 50; //
- var textX = posX + width + 5, textY = posY + 10;
- var startAngle = 0; //起始弧度
- var endAngle = 0; //结束弧度
- for (var i = 0; i < data_arr.length; i++)
- {
- //绘制饼图
- endAngle = endAngle + data_arr[i] * Math.PI * 2; //结束弧度
- ctx.fillStyle = color_arr[i];
- ctx.beginPath();
- ctx.moveTo(ox, oy); //移动到到圆心
- ctx.arc(ox, oy, radius, startAngle, endAngle, false);
- ctx.closePath();
- ctx.fill();
- startAngle = endAngle; //设置起始弧度
-
- //绘制比例图及文字
- ctx.fillStyle = color_arr[i];
- ctx.fillRect(posX, posY + 20 * i, width, height);
- ctx.moveTo(posX, posY + 20 * i);
- ctx.font = 'bold 12px 微软雅黑'; //斜体 30像素 微软雅黑字体
- ctx.fillStyle = "#666666";
- var icount=100 * data_arr[i];
- var percent = text_arr[i] + ":" + icount.toFixed(2)+ "%";
- ctx.fillText(percent, textX, textY + 20 * i);
- }
- ctxw.fillStyle ="#FFFFFF";
- ctxw.beginPath();
- ctxw.moveTo(ox, oy); //移动到到圆心
- ctxw.arc(ox, oy, 90, 0, 2* Math.PI, false);
- ctxw.closePath();
- ctxw.fill();
- }</script>
- </head>
- <body class="clear">
- <!--#include file="panel.asp"-->
- <div id="man_zone">
- <div class="dashboard">
- <h1 class="dashboardHead">数据看板</h1>
- <%Set Rs=Server.CreateObject("ADODB.RecordSet")
- Rs.Open "select count(DISTINCT cs_code) as CustomerTotal from customer where cs_belong="&Session("employee_id"),conn,1,1
- tn=Rs("customerTotal")
- Rs.Close
-
- Rs.Open "select count(DISTINCT cs_code) as CustomerTotal from customer where cs_deal=3 and cs_belong="&Session("employee_id"),conn,1,1
- tdn=Rs("customerTotal")
- Rs.Close
-
- 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
- Do while Not Rs.bof and Not Rs.eof
- data_arr1=data_arr1&FormatNumber(Rs("cc")/tn,-1,-1)&","
- text_arr1=text_arr1&Rs("businessType")&","
- Rs.moveNext
- loop
- Rs.close
- %>
- <input type="hidden" id="data_arr1" value="<%=left(data_arr1,len(data_arr1)-1)%>">
- <input type="hidden" id="text_arr1" value="<%=left(text_arr1,len(text_arr1)-1)%>">
- <div class="dashPanel1">
- <h3>客户类型</h3>
- <canvas id="canvas_circle" width="720" height="360">浏览器不支持canvas
- </canvas>
- </div>
- <%
- 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
- Do while Not Rs.bof and Not Rs.eof
- data_arr2=data_arr2&FormatNumber(Rs("cc")/tn,-1,-1)&","
- Rs.moveNext
- loop
- Rs.close
- %>
- <input type="hidden" id="data_arr2" value="<%=left(data_arr2,len(data_arr2)-1)%>">
- <input type="hidden" id="text_arr2" value="成交,明确需求,背景调查,无响应">
- <div class="dashPanel1">
- <h3>成交比例</h3>
- <canvas id="canvas_circle2" width="720" height="360">浏览器不支持canvas
- </canvas>
- </div>
-
- <%
- 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
- Do while Not Rs.bof and Not Rs.eof
- data_arr3=data_arr3&FormatNumber(Rs("cc")/tn,-1,-1)&","
- text_arr3=text_arr3&Rs("ch_name")&","
- Rs.moveNext
- loop
- Rs.close
- %>
- <input type="hidden" id="data_arr3" value="<%=left(data_arr3,len(data_arr3)-1)%>">
- <input type="hidden" id="text_arr3" value="<%=left(text_arr3,len(text_arr3)-1)%>">
- <div class="dashPanel1">
- <h3>我的客户来源</h3>
- <canvas id="canvas_circle3" width="720" height="360">浏览器不支持canvas
- </canvas>
- </div>
-
- <% 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
- tp=1
- Do while Not Rs.bof and Not Rs.eof
- data_arr5=data_arr5&FormatNumber(Rs("cc")/tdn,-1,-1)&","
- text_arr5=text_arr5&Rs("countryName")&","
- tp=tp-FormatNumber(Rs("cc")/tdn,-1,-1)
- Rs.moveNext
- loop
- Rs.close
- %>
-
- <input type="hidden" id="data_arr5" value="<%=data_arr5&tp%>">
- <input type="hidden" id="text_arr5" value="<%=text_arr5&"其他"%>">
- <div class="dashPanel1">
- <h3>已成交客户分布(Top10)</h3>
- <canvas id="canvas_circle5" width="720" height="360">浏览器不支持canvas</canvas>
- </div>
-
-
- <% 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
- tp=1
- Do while Not Rs.bof and Not Rs.eof
- data_arr4=data_arr4&FormatNumber(Rs("cc")/tn,-1,-1)&","
- text_arr4=text_arr4&Rs("countryName")&","
- tp=tp-FormatNumber(Rs("cc")/tn,-1,-1)
- Rs.moveNext
- loop
- Rs.close
- %>
- <input type="hidden" id="data_arr4" value="<%=data_arr4&tp%>">
- <input type="hidden" id="text_arr4" value="<%=text_arr4&"其他"%>">
- <div class="dashPanel1">
- <h3>客户分布(Top10)</h3>
- <canvas id="canvas_circle4" width="720" height="360">浏览器不支持canvas</canvas>
- </div>
-
-
-
-
-
- <%Set Rs=Nothing:Conn.Close:Set Conn=Nothing%>
- </div>
- <script>
- function init() {
- //客户类型
- var data_arr = $("#data_arr1").val().split(",");
- var color_arr = ["#00FF21", "#FFAA00", "#00AABB", "#FF4400","#009942","#02a0e9","#0168b7","#930784","#e5007f","#e50150","#ef0030","#eb6100","#f49600"];
- var text_arr = $("#text_arr1").val().split(","); ;
- //成交情况
- var data_arr2 = $("#data_arr2").val().split(",");
- var text_arr2 = $("#text_arr2").val().split(",");
- var data_arr3 = $("#data_arr3").val().split(",");
- var text_arr3 = $("#text_arr3").val().split(",");
- var data_arr4 = $("#data_arr4").val().split(",");
- var text_arr4 = $("#text_arr4").val().split(",");
- var data_arr5 = $("#data_arr5").val().split(",");
- var text_arr5 = $("#text_arr5").val().split(",");
- drawCircle("canvas_circle", data_arr, color_arr, text_arr);
- drawCircle("canvas_circle2", data_arr2, color_arr, text_arr2);
- drawCircle("canvas_circle3", data_arr3, color_arr, text_arr3);
- drawCircle("canvas_circle4", data_arr4, color_arr, text_arr4);
- drawCircle("canvas_circle5", data_arr5, color_arr, text_arr5);
- }
- window.onload = init;
- </script>
- </div>
- </body>
- </html>
|