<?php require_once("conn.php"); checkLogin("信息管理"); ?> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>管理区域</title> <link rel="stylesheet" href="css/common.css" type="text/css" /> <script src="js/jquery-1.7.2.min.js"></script> <script 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 = 140; //半径 var ox = radius + 20, oy = radius + 20; //圆心 var width = 10, height = 10; //图例宽和高 var posX = 500, 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(); } function drawRectangle(canvasId, data_arr, text_arr) { var c = document.getElementById(canvasId); var ctx = c.getContext("2d"); var space = 20; //间距 var x = 0, y = 420; for (var i = 0; i < data_arr.length; i++) { x = x + 30 + space; ctx.beginPath(); ctx.fillStyle = "#00aabb"; ctx.rect(x, 420-data_arr[i]*0.2, 30, data_arr[i]*0.2); ctx.closePath(); ctx.fill(); ctx.font = 'bold 10px 微软雅黑'; //斜体 30像素 微软雅黑字体 ctx.fillStyle = "#666666"; ctx.fillText(text_arr[i]+"("+data_arr[i]+")", x+5, 410-data_arr[i]*0.2); } } </script> </head> <body> <div id="man_zone"> <div class="dashboard"> <h1 class="dashboardHead">数据看板</h1> <?php // 获取客户总数 $result = mysqli_query($conn, "SELECT COUNT(DISTINCT cs_code) as CustomerTotal FROM customer"); $row = mysqli_fetch_assoc($result); $tn = $row['CustomerTotal']; // 获取成交客户数 $result = mysqli_query($conn, "SELECT COUNT(DISTINCT cs_code) as CustomerTotal FROM customer WHERE cs_deal=3"); $row = mysqli_fetch_assoc($result); $tdn = $row['CustomerTotal']; // 获取客户类型数据 $data_arr1 = []; $text_arr1 = []; $result = mysqli_query($conn, "SELECT businessType, COUNT(DISTINCT cs_code) as cc FROM customer LEFT JOIN clienttype ON customer.cs_type=clienttype.id GROUP BY businessType"); while($row = mysqli_fetch_assoc($result)) { $data_arr1[] = number_format($row['cc']/$tn, 4); $text_arr1[] = $row['businessType']; } ?> <input type="hidden" id="data_arr1" value="<?= implode(',', $data_arr1) ?>"> <input type="hidden" id="text_arr1" value="<?= implode(',', $text_arr1) ?>"> <div class="dashPanel1"> <h3>客户类型</h3> <canvas id="canvas_circle" width="720" height="360">浏览器不支持canvas</canvas> </div> <?php // 获取成交比例数据 $data_arr2 = []; $result = mysqli_query($conn, "SELECT cs_deal, COUNT(DISTINCT cs_code) as cc FROM customer GROUP BY cs_deal ORDER BY cs_deal DESC"); while($row = mysqli_fetch_assoc($result)) { $data_arr2[] = number_format($row['cc']/$tn, 4); } ?> <input type="hidden" id="data_arr2" value="<?= implode(',', $data_arr2) ?>"> <input type="hidden" id="text_arr2" value="成交,明确需求,背景调查,无响应"> <div class="dashPanel1"> <h3>成交比例</h3> <canvas id="canvas_circle2" width="720" height="360">浏览器不支持canvas</canvas> </div> <?php // 获取客户来源数据 $data_arr3 = []; $text_arr3 = []; $result = mysqli_query($conn, "SELECT ch_name, COUNT(DISTINCT cs_code) as cc FROM customer LEFT JOIN qudao ON customer.cs_from=qudao.id GROUP BY ch_name"); while($row = mysqli_fetch_assoc($result)) { $data_arr3[] = number_format($row['cc']/$tn, 4); $text_arr3[] = $row['ch_name']; } ?> <input type="hidden" id="data_arr3" value="<?= implode(',', $data_arr3) ?>"> <input type="hidden" id="text_arr3" value="<?= implode(',', $text_arr3) ?>"> <div class="dashPanel1"> <h3>客户来源</h3> <canvas id="canvas_circle3" width="720" height="360">浏览器不支持canvas</canvas> </div> <?php // 获取已成交客户分布(Top10)数据 $data_arr5 = []; $text_arr5 = []; $tp = 1; $result = mysqli_query($conn, "SELECT countryName, COUNT(DISTINCT cs_code) as cc FROM customer LEFT JOIN country ON customer.cs_country=country.id WHERE cs_deal=3 GROUP BY countryName ORDER BY cc DESC LIMIT 9"); while($row = mysqli_fetch_assoc($result)) { $value = number_format($row['cc']/$tdn, 4); $data_arr5[] = $value; $text_arr5[] = $row['countryName']; $tp -= $value; } $data_arr5[] = $tp; $text_arr5[] = "其他"; ?> <input type="hidden" id="data_arr5" value="<?= implode(',', $data_arr5) ?>"> <input type="hidden" id="text_arr5" value="<?= implode(',', $text_arr5) ?>"> <div class="dashPanel1"> <h3>已成交客户分布(Top10)</h3> <canvas id="canvas_circle5" width="720" height="360">浏览器不支持canvas</canvas> </div> <?php // 获取客户分布(Top10)数据 $data_arr4 = []; $text_arr4 = []; $tp = 1; $result = mysqli_query($conn, "SELECT countryName, COUNT(DISTINCT cs_code) as cc FROM customer LEFT JOIN country ON customer.cs_country=country.id WHERE cs_deal=3 GROUP BY countryName ORDER BY cc DESC LIMIT 9"); while($row = mysqli_fetch_assoc($result)) { $value = number_format($row['cc']/$tn, 4); $data_arr4[] = $value; $text_arr4[] = $row['countryName']; $tp -= $value; } $data_arr4[] = $tp; $text_arr4[] = "其他"; ?> <input type="hidden" id="data_arr4" value="<?= implode(',', $data_arr4) ?>"> <input type="hidden" id="text_arr4" value="<?= implode(',', $text_arr4) ?>"> <div class="dashPanel1"> <h3>客户分布(Top10)</h3> <canvas id="canvas_circle4" width="720" height="360">浏览器不支持canvas</canvas> </div> <?php // 获取各业务成交客户占比数据 $data_arr6 = []; $text_arr6 = []; $result = mysqli_query($conn, "SELECT em_user, COUNT(DISTINCT cs_code) as cc FROM customer LEFT JOIN employee ON customer.cs_belong=employee.id WHERE cs_deal=3 GROUP BY em_user ORDER BY cc DESC"); while($row = mysqli_fetch_assoc($result)) { $data_arr6[] = number_format($row['cc']/$tdn, 4); $text_arr6[] = $row['em_user']; } ?> <input type="hidden" id="data_arr6" value="<?= implode(',', $data_arr6) ?>"> <input type="hidden" id="text_arr6" value="<?= implode(',', $text_arr6) ?>"> <div class="dashPanel1"> <h3>各业务成交客户占比</h3> <canvas id="canvas_circle6" width="720" height="360">浏览器不支持canvas</canvas> </div> <?php // 获取各业务客户占比数据 $data_arr7 = []; $text_arr7 = []; $result = mysqli_query($conn, "SELECT em_user, COUNT(DISTINCT cs_code) as cc FROM customer LEFT JOIN employee ON customer.cs_belong=employee.id WHERE cs_deal>0 GROUP BY em_user ORDER BY cc DESC"); while($row = mysqli_fetch_assoc($result)) { $data_arr7[] = $row['cc']; $text_arr7[] = $row['em_user']; } ?> <input type="hidden" id="data_arr7" value="<?= implode(',', $data_arr7) ?>"> <input type="hidden" id="text_arr7" value="<?= implode(',', $text_arr7) ?>"> <div class="dashPanel2"> <h3>各业务客户占比(扣除无响应)</h3> <canvas id="canvas_circle7" width="1200" height="500">浏览器不支持canvas</canvas> </div> </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(","); var data_arr6 = $("#data_arr6").val().split(","); var text_arr6 = $("#text_arr6").val().split(","); var data_arr7 = $("#data_arr7").val().split(","); var text_arr7 = $("#text_arr7").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); drawCircle("canvas_circle6", data_arr6, color_arr, text_arr6); drawRectangle("canvas_circle7", data_arr7, text_arr7); } window.onload = init; </script> </div> </body> </html> <?php mysqli_close($conn); ?>