<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>后台管理系统</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery/jQuery-2.2.0.min.js"></script>
<script src="js/charts/Chart.js"></script>
<script>
$(function () {
Canvas1();
Canvas2();
Canvas3();
});
function Canvas1() {
var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
var doughnutData = [
{
value: randomScalingFactor(),
color: "#F7464A",
highlight: "#FF5A5E",
label: "事假"
},
{
value: randomScalingFactor(),
color: "#46BFBD",
highlight: "#5AD3D1",
label: "病假"
},
{
value: randomScalingFactor(),
color: "#FDB45C",
highlight: "#FFC870",
label: "公休假"
},
{
value: randomScalingFactor(),
color: "#949FB1",
highlight: "#A8B3C5",
label: "调休假"
}
];
var ctx = document.getElementById("Canvas1").getContext("2d");
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, { responsive: false });
}
function Canvas2() {
var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
var lineChartData = {
labels: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
datasets: [
{
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}
]
}
var ctx = document.getElementById("Canvas2").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
bezierCurve: false,
});
}
function Canvas3() {
var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
var lineChartData = {
labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "8月", "10月", "11月", "12月"],
datasets: [
{
fillColor: "#578ebe",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}
]
}
var ctx = document.getElementById("Canvas3").getContext("2d");
window.myLine = new Chart(ctx).Bar(lineChartData, {
bezierCurve: false,
});
}
</script>
</head>
<body>
<div id="areascontent">
<div class="rows" style="margin-bottom: 0.8%; overflow: hidden;">
<div style="float: left; width: 69.2%;">
<div style="height: 100%; border: 1px solid #e6e6e6; overflow: hidden;">
<div class="dashboard-stats">
<div class="dashboard-stats-item" style="background-color: #578ebe;">
<div class="stat-icon">
<i class="fa fa-clock-o"></i>
</div>
<h2 class="m-top-none">17<span>个</span></h2>
<h5>待办未处理</h5>
</div>
</div>
<div class="dashboard-stats">
<div class="dashboard-stats-item" style="background-color: #e35b5a;">
<h2 class="m-top-none">12<span>条</span></h2>
<h5>预警信息未读</h5>
<div class="stat-icon">
<i class="fa fa-bell"></i>
</div>
</div>
</div>
<div class="dashboard-stats">
<div class="dashboard-stats-item" style="background-color: #44b6ae;">
<h2 class="m-top-none">20<span>封</span></h2>
<h5>邮件未读</h5>
<div class="stat-icon">
<i class="fa fa-envelope-o"></i>
</div>
</div>
</div>
<div class="dashboard-stats">
<div class="dashboard-stats-item" style="background-color: #8775a7; margin-right: 0px;">
<h2 class="m-top-none">6</h2>
<h5>对公待签收任务</h5>
<div class="stat-icon">
<i class="fa fa-gavel"></i>
</div>
</div>
</div>
<div class="dashboard-stats">
<div class="dashboard-stats-item" style="background-color: #4f5c65; margin-bottom: 0px;">
<h2 class="m-top-none">324<span>件</span></h2>
<h5>今日订单数</h5>
<div class="stat-icon">
<i class="fa fa-shopping-cart"></i>
</div>
</div>
</div>
<div class="dashboard-stats">
<div class="dashboard-stats-item" style="background-color: #14aae4; margin-bottom: 0px;">
<h2 class="m-top-none">525<span>件</span></h2>
<h5>昨日订单数</h5>
<div class="stat-icon">
<i class="fa fa-file-text-o"></i>
</div>
</div>
</div>
<div class="dashboard-stats">
<div class="dashboard-stats-item" style="background-color: #949FB1; margin-bottom: 0px;">
<h2 class="m-top-none">355<span>件</span></h2>
<h5>回退订单数</h5>
<div class="stat-icon">
<i class="fa fa-coffee"></i>
</div>
</div>
</div>
<div class="dashboard-stats">
<div class="dashboard-stats-item" style="background-color: #f29503; margin-right: 0px; margin-bottom: 0px;">
<h2 class="m-top-n