thmz/src/main/resources/templates/index.html

<link rel="stylesheet" href="/thmz/css/bootstrap/css/bootstrap-progressbar-3.3.4.min.css"/>
<link rel="stylesheet" href="/thmz/css/bootstrap/css/daterangepicker.css"/>
<link rel="stylesheet" href="/thmz/css/custom.min.css">
<script src="/thmz/js/chart/Chart.bundle.js"></script>
<!--<script src="/thmz/js/date.js"></script>-->
<script src="/thmz/js/moment.min.js"></script>
<script src="/thmz/js/daterangepicker.js"></script>
<script src="/thmz/js/common/date-util.js"></script>
<script src="/thmz/js/custom.js"></script>
<script src="/thmz/js/index.js"></script>
<style>
    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }

    .shortcuts {
        border: 1px solid;
        width: 40px;
        height: 40px;
        margin: 5px 10px 5px 0;
        border-radius: 10%;
        padding: 4px 8px;
        border-color: #6D31CF !important;
    }

    .shortcuts i {
        font-size: 30px;
        color: #6D31CF;
    }

    .w_25 span {
        position: absolute;
        margin-top: 25px;
        transform: translateY(-50%);
    }

    .first_today_work {
        border-right: 1px solid #2e69eb;
    }

    .today_work {
        height: 50px;
        text-align: center;
        line-height: 25px;
        float: left;
        box-sizing: border-box;
        width: 50%;
        margin-top: 15px;
        margin-bottom: 15px;
        background-color: #EFF3FD;
        -webkit-border-radius: 2px;
    }

    .work_detail {
        position: relative;
        display: block;
        margin-bottom: 12px;
        -webkit-border-radius: 5px;
        overflow: hidden;
        padding-bottom: 5px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 5px;
        -moz-background-clip: padding;
        border-radius: 5px;
        background: #FFF;
        transition: all .3s ease-in-out;
    }

    .work_detail span {
        font-size: 14px;
        line-height: 10px;
        margin-left: 10px;
        font-family: Microsoft YaHei, Arial, wryh, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, sans-serif;
    }
    .work_detail_full{
        border-bottom: 0.5px solid #dcdcdc;
        padding-top: 5px;
        margin-top: 5px;
        line-height: 30px;
    }
</style>
<div class="row top_tiles">
    <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="tile-stats">
            <div class="icon"><i class="fa fa-user-md" style="color: #1ABB9C;"></i></div>
            <div class="count">179</div>
            <h3>今日有效挂号（人次）</h3>
        </div>
    </div>
    <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="tile-stats">
            <div class="icon"><i class="fa fa-stethoscope" style="color: #A76AE7;"></i></div>
            <div class="count">179</div>
            <h3>今日接诊（人次）</h3>
        </div>
    </div>
    <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="tile-stats">
            <div class="icon"><i class="fa fa-money" style="color: #3E94EA;"></i></div>
            <div class="count">179</div>
            <h3>今日零售（元）</h3>
        </div>
    </div>
    <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="tile-stats">
            <div class="icon"><i class="fa fa-cny" style="color: #E74C3C;"></i></div>
            <div class="count">179</div>
            <h3>今日营业（元）</h3>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8 col-sm-8 col-xs-12">
        <div class="dashboard_graph">

            <div class="row x_title">
                <div class="col-md-4">
                    <h3>门诊运营趋势
                        <!-- <small>Graph title sub-title</small>-->
                    </h3>
                </div>
                <div class="col-md-4">
                    <div id="reportrange" class="pull-right"
                         style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
                        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                        <span>December 30, 2014 - January 28, 2015</span> <b class="caret"></b>
                    </div>
                </div>
            </div>

            <div>
                <!-- <div id="chart_plot_01" class="demo-placeholder"></div>-->
                <canvas id="canvas"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-12">
        <div class="x_panel tile fixed_height_200">
            <div class="x_title">
                <h2>快捷操作</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                    <li><a class="close-link"><i class="fa fa-close"></i></a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <div class="widget_summary">
                    <div class="w_left w_25" style="width: 33.3%;cursor: pointer">
                        <a class="pull-left  profile_thumb shortcuts">
                            <i class="fa fa-user"></i>
                        </a>
                        <span>新增挂号</span>
                    </div>
                    <div class="w_left w_25" style="width: 33.3%;cursor: pointer">
                        <a class="pull-left  profile_thumb shortcuts">
                            <i class="fa fa-rmb"></i>
                        </a>
                        <span>收费管理</span>
                    </div>
                    <div class="w_left w_25" style="width: 33.3%;cursor: pointer">
                        <a class="pull-left profile_thumb shortcuts" style="padding: 3px 3px;">
                            <i class="fa fa-shopping-cart"></i>
                        </a>
                        <span>配药管理</span>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="widget_summary">
                    <div class="w_left w_25" style="width: 33.3%;cursor: pointer">
                        <a class="pull-left  profile_thumb shortcuts" style="padding: 3px 3px;">
                            <i class="fa fa-medkit"></i>
                        </a>
                        <span>药品零售</span>
                    </div>
                    <div class="w_left w_25" style="width: 33.3%;cursor: pointer">
                        <a class="pull-left profile_thumb shortcuts" style="padding: 3px 3px;">
                            <i class="fa fa-bank"></i>
                        </a>
                        <span>库存查询</span>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-12">
        <div class="x_panel tile fixed_height_390">
            <div class="x_title">
                <h2>今日工作</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                    <li><a class="close-link"><i class="fa fa-close"></i></a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <div class="tile-stats" style="background-color: #EFF3FD;margin-bottom: 20px;">
                    <div class="today_work first_today_work">
                        <label style="font-size: 16px;">3</label>
                        &nbsp;人<br>接诊人数
                    </div>
                    <div class="today_work">
                        <label style="font-size: 16px;">3</label>
                        &nbsp;张<br>开具处方
                    </div>
                </div>
                <div class="work_detail">
                    <div class="work_detail_full">
                        <i class="fa fa-file-text" style="color: #6D31CF;"></i>
                        <span title="慢性阻塞性肺疾病">慢性阻塞性肺疾病 <!----></span>
                        <div class="el-col el-col-4" style="float: right;text-align: right;">1
                            张
                        </div>
                    </div>
                    <div class="work_detail_full">
                        <i class="fa fa-file-text" style="color: #6D31CF;"></i>
                        <span title="流行性乙型脑炎">流行性乙型脑炎 <!----></span>
                        <div class="el-col el-col-4" style="float: right;text-align: right;">2
                            张
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

</script>