master

分支 (1)

标签 (1)

管理

管理

master

v6.6.1

learun
/
default.html

<!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.4.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-none">3335<span>元</span></h2>
                            <h5>昨日成交金额</h5>
                            <div class="stat-icon">
                                <i class="fa fa-rmb" style="padding-left: 10px;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="float: right; width: 30%;">
                <div style="height: 221px; border: 1px solid #e6e6e6; background-color: #fff;">
                    <div class="panel panel-default">
                        <div class="panel-heading"><i class="fa fa-area-chart fa-lg" style="padding-right: 5px;"></i>成交订单</div>
                        <div class="panel-body">
                            <canvas id="Canvas2" style="height: 165px; width: 100%;"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rows" style="margin-bottom: 0.8%; overflow: hidden;">
            <div style="float: left; width: 69.2%;">
                <div style="height: 290px; border: 1px solid #e6e6e6; background-color: #fff;">
                    <div class="panel panel-default">
                        <div class="panel-heading"><i class="fa fa-bar-chart fa-lg" style="padding-right: 5px;"></i>柱状图</div>
                        <div class="panel-body">
                            <canvas id="Canvas3" style="height: 230px; width: 100%;"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div style="float: right; width: 30%;">
                <div style="height: 290px; border: 1px solid #e6e6e6; background-color: #fff;">
                    <div class="panel panel-default">
                        <div class="panel-heading"><i class="fa fa-pie-chart fa-lg" style="padding-right: 5px;"></i>请假统计</div>
                        <div class="panel-body">
                            <canvas id="Canvas1" style="height: 180px; width: 100%; margin-top: 10px;"></canvas>
                            <div style="text-align: center; padding-top: 15px;">
                                <span><i class="fa fa-square" style="color: #F7464A; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>事假</span>
                                <span style="margin-left: 10px;"><i class="fa fa-square" style="color: #46BFBD; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>病假</span>
                                <span style="margin-left: 10px;"><i class="fa fa-square" style="color: #FDB45C; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>公休假</span>
                                <span style="margin-left: 10px;"><i class="fa fa-square" style="color: #949FB1; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>调休假</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="rows" style="overflow: hidden;">
            <div style="float: left; width: 33.8%; margin-right: 0.8%;">
                <div style="height: 240px; border: 1px solid #e6e6e6; background-color: #fff;">
                    <div class="panel panel-default">
                        <div class="panel-heading"><i class="fa fa-send fa-lg" style="padding-right: 5px;"></i>企业文化</div>
                        <div class="panel-body">
                            <ul>
                                <li><a href="index.html" target="_blank">武大|我在樱花烂漫时遇见你</a><span class="time">2018-07-02</span></li>
                                <li><a href="index.html" target="_blank">现代国有企业道德体系初构</a><span class="time">2018-06-18</span></li>
                                <li><a href="index.html" target="_blank">国有企业文化问题根源及文化重塑任务分析</a><span class="time">2018-06-26</span></li>
                                <li><a href="index.html" target="_blank">国有企业文化建设必须突出员工文化</a><span class="time">2018-04-20</span></li>
                                <li><a href="index.html" target="_blank">加强企业公民建设 推进企业和谐发展</a><span class="time">2018-03-08</span></li>
                                <li><a href="index.html" target="_blank">不断提升大庆精神 实现企业持续发展</a><span class="time">2018-02-22</span></li>
                                <li><a href="index.html" target="_blank">科学发展作指导 人水和谐路更宽</a><span class="time">2018-02-15</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div style="float: left; width: 34.6%; margin-right: 0.8%;">
                <div style="height: 240px; border: 1px solid #e6e6e6; background-color: #fff;">
                    <div class="panel panel-default">
                        <div class="panel-heading"><i class="fa fa-rss fa-lg" style="padding-right: 5px;"></i>通知公告</div>
                        <div class="panel-body">
                            <ul>
                                <li><a href="index.html" target="_blank">【通知】武大|我在樱花烂漫时遇见你</a><span class="time">2018-07-21</span></li>
                                <li><a href="index.html" target="_blank">【公告】OA办公使用指南</a><span class="time">2018-07-21</span></li>
                                <li><a href="index.html" target="_blank">【公告】劳动节集体出游指南</a><span class="time">2018-07-21</span></li>
                                <li><a href="index.html" target="_blank">【通知】2018年G20财长和央行行</a><span class="time">2018-07-21</span></li>
                                <li><a href="index.html" target="_blank">【通知】2018年G20财长和央行行</a><span class="time">2018-07-21</span></li>
                                <li><a href="index.html" target="_blank">【通知】品牌价值的最佳选择</a><span class="time">2018-07-21</span></li>
                                <li><a href="index.html" target="_blank">【公告】采购商城全新升级自营业正品</a><span class="time">2018-07-21</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div style="float: right; width: 30%;">
                <div style="height: 240px; border: 1px solid #e6e6e6; background-color: #fff;">
                    <div class="panel panel-default">
                        <div class="panel-heading"><i class="fa fa-thumbs-o-up fa-lg" style="padding-right: 5px;"></i>最新签约</div>
                        <div class="panel-body">
                            <ul>
                                <li><a href="index.html" target="_blank">武大|我在樱花烂漫时遇见你</a><span class="time">2018-07-21</span></li>
                                <li><a href="index.html" target="_blank">曲靖市绿能燃气运输有限公司</a><span class="time">2018-07-20</span></li>
                                <li><a href="index.html" target="_blank">青海航天信息有限公司</a><span class="time">2018-07-19</span></li>
                                <li><a href="index.html" target="_blank">吉林省蔬菜花卉科学研究院</a><span class="time">2018-07-17</span></li>
                                <li><a href="index.html" target="_blank">青海省广播电视信息网络股份有限公司</a><span class="time">2018-07-17</span></li>
                                <li><a href="index.html" target="_blank">国营长空精密机械制造公司</a><span class="time">2018-07-13</span></li>
                                <li><a href="index.html" target="_blank">广东友元国土信息工程有限公司</a><span class="time">2018-07-12</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<style>
#copyrightcontent {
    height: 30px;
    line-height: 29px;
    overflow: hidden;
    position: absolute;
    top: 100%;
    margin-top: -30px;
    width: 100%;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    padding-left: 10px;
    padding-right: 10px;
}

.dashboard-stats {
    float: left;
    width: 25%;
}

.dashboard-stats-item {
    position: relative;
    overflow: hidden;
    color: #fff;
    cursor: pointer;
    height: 105px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding-left: 15px;
    padding-top: 20px;
}

.dashboard-stats-item .m-top-none {
    margin-top: 5px;
}

.dashboard-stats-item h2 {
    font-size: 28px;
    font-family: inherit;
    line-height: 1.1;
    font-weight: 500;
    padding-left: 70px;
}

.dashboard-stats-item h2 span {
    font-size: 12px;
    padding-left: 5px;
}

.dashboard-stats-item h5 {
    font-size: 12px;
    font-family: inherit;
    margin-top: 1px;
    line-height: 1.1;
    padding-left: 70px;
}


.dashboard-stats-item .stat-icon {
    position: absolute;
    top: 18px;
    font-size: 50px;
    opacity: .3;
}

.dashboard-stats i.fa.stats-icon {
    width: 50px;
    padding: 20px;
    font-size: 50px;
    text-align: center;
    color: #fff;
    height: 50px;
    border-radius: 10px;
}

.panel-default {
    border: none;
    border-radius: 0px;
    margin-bottom: 0px;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.panel-default > .panel-heading {
    color: #777;
    background-color: #fff;
    border-color: #e6e6e6;
    padding: 10px 10px;
}

.panel-default > .panel-body {
    padding: 10px;
    padding-bottom: 0px;
}

.panel-default > .panel-body ul {
    overflow: hidden;
    padding: 0;
    margin: 0px;
    margin-top: -5px;
}

.panel-default > .panel-body ul li {
    line-height: 27px;
    list-style-type: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.panel-default > .panel-body ul li .time {
    color: #a1a1a1;
    float: right;
    padding-right: 5px;
}
</style>
</body>
</html>