{% extends 'tasks/base.html' %} {% load static %} {% block main_content %} <div class="content-wrapper" style="min-height: 1200.88px;"> <!-- Content Header (Page header) --> <section class="content-header"> <div class="container-fluid"> <div class="row mb-2"> <div class="col-sm-6"> <h1>总览 ({{ date }}) </h1> {# <h1><font color="#FF0000">测试版,请勿用于生产环境!!!</font></h1>#} </div> <div class="col-sm-6"> {# <ol class="breadcrumb float-sm-right">#} {# <li class="breadcrumb-item active"><a href="#">主页</a></li>#} {# </ol>#} <br> {% load taskfilter %} <ul class="pagination float-md-right"> <li class="page-item"><a class="page-link" href="/{{ date|last_month }}">«</a></li> <li class="page-item"><a class="page-link"> {{ date|this_month }}月 </a></li> <li class="page-item"><a class="page-link" href="/{{ date|next_month }}">»</a></li> </ul> </div> </div> </div><!-- /.container-fluid --> </section> <!-- Main content --> <section class="content"> <div class="container-fluid"> <div class="row"> <div class="col"> <div class="info-box"> <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-tasks"></i></span> <div class="info-box-content"> <span class="info-box-text">部门总任务数</span> <span class="info-box-number"> {{ department_cal.depart_count|floatformat:'0'|default_if_none:'0' }} <small>个</small> </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> <div class="col"> <div class="info-box mb-3"> <div class="info-box-content"> <span class="info-box-text">部门预计总工作量</span> <span class="info-box-number"> {{ department_cal.pre_cal|default_if_none:'0'|floatformat:'1' }} <small></small> </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> <div class="col"> <div class="info-box mb-3"> <div class="info-box-content"> <span class="info-box-text">部门实际总工作量</span> <span class="info-box-number"> {{ department_cal.real_cal|default_if_none:'0'|floatformat:'1' }} <small></small> </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> <div class="col"> <div class="info-box mb-3"> <div class="info-box-content"> <span class="info-box-text">部门预计平均工作量</span> <span class="info-box-number"> {{ department_cal.pre_avg|default_if_none:'0'|floatformat:'1' }} <small></small> </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> <div class="col"> <div class="info-box mb-3"> <div class="info-box-content"> <span class="info-box-text">部门实际平均工作量</span> <span class="info-box-number"> {{ department_cal.real_avg|default_if_none:'0'|floatformat:'1' }} <small></small> </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> <!-- fix for small devices only --> <div class="clearfix hidden-md-up"></div> {# <div class="col-12 col-sm-6 col-md-3">#} {# <div class="info-box mb-3">#} {# <span class="info-box-icon bg-success elevation-1"><i class="fas fa-shopping-cart"></i></span>#} {##} {# <div class="info-box-content">#} {# <span class="info-box-text">Sales</span>#} {# <span class="info-box-number">760</span>#} {# </div>#} {# <!-- /.info-box-content -->#} {# </div>#} {# <!-- /.info-box -->#} {# </div>#} {# <!-- /.col -->#} {# <div class="col-12 col-sm-6 col-md-3">#} {# <div class="info-box mb-3">#} {# <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-users"></i></span>#} {##} {# <div class="info-box-content">#} {# <span class="info-box-text">New Members</span>#} {# <span class="info-box-number">2,000</span>#} {# </div>#} {# <!-- /.info-box-content -->#} {# </div>#} {# <!-- /.info-box -->#} {# </div>#} <!-- /.col --> </div> <div class="row"> <div class="col"> <div class="info-box"> <span class="info-box-icon bg-info elevation-1"><i class="fas fa-tasks"></i></span> <div class="info-box-content"> <span class="info-box-text"><b>个人任务数据统计:</b></span> {# <span class="info-box-number">#} {# {% for user in current_user %}{{ user.main_executor_count }}{% endfor %}#} {# <small>个</small>#} {# </span>#} </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <div class="col"> <div class="info-box"> {# <span class="info-box-icon bg-info elevation-1"><i class="fas fa-tasks"></i></span>#} <div class="info-box-content"> <span class="info-box-text">承办任务数</span> <span class="info-box-number"> {{ current_user.main_count }} <small>个</small> </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> <div class="col"> <div class="info-box mb-3"> {# <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-tasks"></i></span>#} <div class="info-box-content"> <span class="info-box-text">协办任务数</span> <span class="info-box-number"> {{ current_user.sub_count }} <small>个</small> </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> <div class="col"> <div class="info-box mb-3"> <div class="info-box-content"> <span class="info-box-text">预计工作量</span> <span class="info-box-number"> {{ current_user.pre_cal|floatformat:'1'|default_if_none:'0' }} <small></small> </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> <div class="col"> <div class="info-box mb-3"> <div class="info-box-content"> <span class="info-box-text">实际工作量</span> <span class="info-box-number"> {{ current_user.real_cal|floatformat:'1'|default_if_none:'0' }} <small></small> </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> <!-- fix for small devices only --> <div class="clearfix hidden-md-up"></div> {# <div class="col-12 col-sm-6 col-md-3">#} {# <div class="info-box mb-3">#} {# <span class="info-box-icon bg-success elevation-1"><i class="fas fa-shopping-cart"></i></span>#} {##} {# <div class="info-box-content">#} {# <span class="info-box-text">Sales</span>#} {# <span class="info-box-number">760</span>#} {# </div>#} {# <!-- /.info-box-content -->#} {# </div>#} {# <!-- /.info-box -->#} {# </div>#} {# <!-- /.col -->#} {# <div class="col-12 col-sm-6 col-md-3">#} {# <div class="info-box mb-3">#} {# <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-users"></i></span>#} {##} {# <div class="info-box-content">#} {# <span class="info-box-text">New Members</span>#} {# <span class="info-box-number">2,000</span>#} {# </div>#} {# <!-- /.info-box-content -->#} {# </div>#} {# <!-- /.info-box -->#} {# </div>#} <!-- /.col --> </div> <div class="row"> <div class="col-md-12"> <!-- BAR CHART --> <div class="card card-gray"> <div class="card-header"> <h3 class="card-title">本部门工作统计表</h3> <div class="card-tools"> <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i> </button> <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button> </div> </div> <!-- 工作统计表格 --> <div class="card-body"> <div class="chart"> <div class="chartjs-size-monitor"> <div class="chartjs-size-monitor-expand"> <div class=""></div> </div> <div class="chartjs-size-monitor-shrink"> <div class=""></div> </div> </div> <canvas id="barChart" style="height: 230px; min-height: 230px; display: block; width: 764px;" width="764" height="230" class="chartjs-render-monitor"></canvas> </div> </div> <!-- /.card-body --> </div> <!-- /.card --> </div> <!-- /.col (MAIN) --> </div> <!-- /.row --> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-header"> <h3 class="card-title">部门工作统计表</h3> </div> {# TODO 更换为绩效考核表 分季度按人显示工作量及完成质量#} <!-- /.card-header --> <div class="card-body"> <div id="example2_wrapper" class="dataTables_wrapper dt-bootstrap4"><div class="row"><div class="col-sm-12 col-md-6"></div><div class="col-sm-12 col-md-6"></div></div><div class="row"><div class="col-sm-12"><table id="example2" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info"> <thead> <tr role="row"> <th class="sorting_asc" tabindex="0" aria-controls="example2" rowspan="2" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending">姓名</th> <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="2" style="text-align: center">一季度</th> <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="2" style="text-align: center">二季度</th> <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="2" style="text-align: center">三季度</th> <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="2" style="text-align: center">四季度</th> </tr> <tr role="row"> <th>实际工作量</th> <th>完成质量</th> <th>实际工作量</th> <th>完成质量</th> <th>实际工作量</th> <th>完成质量</th> <th>实际工作量</th> <th>完成质量</th> </tr> </thead> <tbody> {% for user in stat.values %} <tr role="row" class="odd"> <td class="sorting_1">{{ user.real_name }}</td> <td>{{ user.real_cal_1|default_if_none:'0'|floatformat:'1' }}</td> <td>{{ user.quality_1|default_if_none:'0'|floatformat:'1' }}</td> <td>{{ user.real_cal_2|default_if_none:'0'|floatformat:'1' }}</td> <td>{{ user.quality_2|default_if_none:'0'|floatformat:'1' }}</td> <td>{{ user.real_cal_3|default_if_none:'0'|floatformat:'1' }}</td> <td>{{ user.quality_3|default_if_none:'0'|floatformat:'1' }}</td> <td>{{ user.real_cal_4|default_if_none:'0'|floatformat:'1' }}</td> <td>{{ user.quality_4|default_if_none:'0'|floatformat:'1' }}</td> </tr> {% endfor %} </tbody> {# <tfoot>#} {# <tr><th rowspan="1" colspan="1">Rendering engine</th><th rowspan="1" colspan="1">Browser</th><th rowspan="1" colspan="1">Platform(s)</th><th rowspan="1" colspan="1">Engine version</th><th rowspan="1" colspan="1">CSS grade</th></tr>#} {# </tfoot>#} </table></div></div> </div> </div> <!-- /.card-body --> </div> <!-- /.card --> </div> <!-- /.col --> </div> </div><!-- /.container-fluid --> </section> <!-- /.content --> </div> {# <div class="content-wrapper">#} {# {{ main_points }}#} {# <br>#} {# {{ sub_points }}#} {# <br>#} {# {{ points }}#} {# {{ points.3.credit }}#} {# {% for point in points.values %}'{{ point }}', {% endfor %}#} {# {% for point in points %}#} {# {{ point }}#} {# {% endfor %}#} {##} {# {% for user in users %}#} {# {{ user }}#} {# {{ user.get_predict_work_count.total_predict_work }}#} {# {{ user.get_total_point }}#} {# {{ user.main_executor.count }}#} {# {% for todo in user.main_executor.all %}#} {# {{ todo }}#} {# {{ todo.points }}#} {# {% endfor %}#} {# </br>#} {# {% endfor %}#} {##} {# </div>#} {% endblock %} {% block script %} <!-- ChartJS --> <script src="{% static 'tasks/plugins/chart.js/Chart.min.js' %}"></script> <script> $(function () { /* ChartJS * ------- * Here we will create a few charts using ChartJS */ var areaChartData = { labels : [{% for user in users_data.values %}'{{ user.real_name }}', {% endfor %}], datasets: [ { label : '协办任务', backgroundColor : 'rgba(114,140,212,1)', borderColor : 'rgba(114,140,212,1)', pointRadius : false, pointColor : 'rgba(114,140,212,1)', pointStrokeColor : '#c1c7d1', pointHighlightFill : '#fff', pointHighlightStroke: 'rgba(220,220,220,1)', data : [{% for user in users_data.values %}'{{ user.sub_count }}', {% endfor %}] }, { label : '承办任务', backgroundColor : 'rgba(23,162,184,0.9)', borderColor : 'rgba(100,98,204,0.8)', pointRadius : false, pointColor : '#3b8bba', pointStrokeColor : 'rgba(60,141,188,1)', pointHighlightFill : '#fff', pointHighlightStroke: 'rgba(60,141,188,1)', data : [{% for user in users_data.values %}'{{ user.main_count }}', {% endfor %}] }, { label : '预计工作量', backgroundColor : 'rgba(210, 214, 222,1)', borderColor : 'rgba(210, 214, 222,1)', pointRadius : false, pointColor : '#3b8bba', pointStrokeColor : 'rgba(60,141,188,1)', pointHighlightFill : '#fff', pointHighlightStroke: 'rgba(60,141,188,1)', data : [{% for user in users_data.values %}'{{ user.pre_cal|floatformat:'1' }}', {% endfor %}] }, { label : '工作量', backgroundColor : 'rgba(253,199,101,0.9)', borderColor : 'rgba(253,199,101,0.8)', pointRadius : false, pointColor : '#3b8bba', pointStrokeColor : 'rgba(60,141,188,1)', pointHighlightFill : '#fff', pointHighlightStroke: 'rgba(60,141,188,1)', data : [{% for user in users_data.values %}'{{ user.real_cal|floatformat:'1' }}', {% endfor %}] }, ] } //------------- //- BAR CHART - //------------- var barChartCanvas = $('#barChart').get(0).getContext('2d') var barChartData = jQuery.extend(true, {}, areaChartData) var temp0 = areaChartData.datasets[0] var temp1 = areaChartData.datasets[1] barChartData.datasets[0] = temp1 barChartData.datasets[1] = temp0 var barChartOptions = { responsive : true, maintainAspectRatio : false, datasetFill : false } var barChart = new Chart(barChartCanvas, { type: 'bar', data: barChartData, options: barChartOptions }) }) </script> {% endblock %}