pgfqe6ch8/app/views/colleges/statistics.html.erb

<style>body{background-color: #fff!important;}</style>

<script src="/javascripts/educoder/echarts.js"></script>

<div class="statistics_top">
  <p class="color-blue font-32 edu-txt-center pt50"><%= @school.try(:name) %><%#= @department.try(:name) %></p>
  <div class="statistics_position">
    <ul class="educontent edu-txt-center clearfix count_ul">
      <li>
        <span>教师</span>
        <span><%= @teachers_count %></span>
      </li>
      <li>
        <span>学生</span>
        <span><%= @students_count %></span>
      </li>
      <li>
        <span>课堂</span>
        <span><%= @courses_count %></span>
      </li>
      <li>
        <span>共建实训</span>
        <span><%= @shixuns_count %></span>
      </li>
    </ul>
  </div>
</div>
<div class="educontent mt30 mb40">
  <div class="base_situation edu-back-white mb30 static_shadow">
    <p class="font-24 padding30-20">基本情况</p>
    <div class="base_status_name">
      <li>教师</li>
      <li>学生</li>
      <li>课堂</li>
      <li>共建实训</li>
      <li>实训报告</li>
      <li>学员实战时间</li>
<!--      <li>云主机</li>-->
    </div>
    <div class="base_status_value">
      <li><span><%= @teachers_count %></span>人</li>
      <li><span><%= @students_count %></span>人</li>
      <li><span><%= @courses_count %></span>个</li>
      <li><span><%= @shixuns_count %></span>个</li>
      <li class="shixun-report-count">加载中</li>
      <li class="shixun-time">加载中</li>
<!--      <li><span><%#= @department.present? ? @department.host_count.to_i : @school.departments.first.try(:host_count).to_i %></span>台</li>-->
    </div>
  </div>

  <div class="white-panel mb20 pl0 clearfix">
    <li class="active" index="1"><a href="javascript:void(0);">课堂</a></li>
    <li index="2"><a href="<%= student_shixun_college_path(@department.identifier) %>" data-remote="true">学生实训</a></li>
    <!--<li><a href="<%#= engineering_capability_college_path(@department) %>" data-remote="true">工程能力</a></li>-->
<!--    <li index="4"><a href="<%#= student_eval_college_path(@school) %>" data-remote="true">学生测评</a></li>-->
  </div>

  <div class="panelContent panelContent-1">
    <div class="onLine_lesson edu-back-white mb30 static_shadow" id="course_statistics">
      <%#= render :partial => "course_statistics" %>
    </div>

    <div class="clearfix edu-back-white mb30">
      <div class="fl with60 pr40">
        <div class="teacher_ranking static_shadow">
          <p class="font-24 padding30-20">教师排名</p>
          <table class="edu-pop-table head-color edu-txt-center bor-top-greyE" cellspacing="0" cellpadding="0">
            <thead>
            <th class="pl20 pr20">排名</th>
            <th width="10%">姓名</th>
            <th>管理课堂</th>
            <th>已发布实训作业</th>
            <th>未发布实训作业</th>
            <th>学生数</th>
            <th>完成率</th>
            <th>发布实训</th>
            </thead>
            <tbody>
              <tr><td colspan="100" style="height:400px">加载中...</td></tr>
              </tbody>
            </table>
        </div>
      </div>
      <div class="fl width40">
        <div class="online_status static_shadow">
          <p class="font-24 padding30-20">在线实训情况</p>
          <div class="pie-chart-loading" style="width: 440px;height: 480px; text-align: center; padding: 150px 0; box-sizing: border-box;">加载中...</div>
          <%= render :partial => 'welcome/no_data', locals: { style: 'display: none' } %>
          <div id="pieChart"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="panelContent panelContent-2 none">
    <div class="clearfix edu-back-white mb30">
      <div class="fl with60 pr40">
        <div class="student_ranking static_shadow">
          <p class="font-24 padding30-20">学生排名</p>
          <table class="edu-pop-table head-color edu-txt-center bor-top-greyE" cellspacing="0" cellpadding="0" id="student_shixun_table">
          </table>
        </div>
      </div>
      <div class="fl width40">
        <div class="static_shadow">
          <p class="font-24 pt30 pl20 pr20">最热评测</p>
          <div id="hotEvaluating" style="width: 480px;height: 440px;"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="panelContent panelContent-3 none">
    <div class="padding30-20 static_shadow mb30">
      <p class="font-24 mb15">工程能力趋势</p>
      <p class="edu-txt-right pr15">次/人</p>
      <div id="abilityGraph" style="height: 400px;width: 100%;"></div>
    </div>
  </div>

  <div class="panelContent panelContent-4 none">
    <div class="padding30-20 static_shadow">
      <p class="font-24 mb10">学生测评统计</p>
      <div id="student_eval_statistics">
      </div>
    </div>
  </div>
</div>

<script>
    $(function(){
        $(function(){
            $(".white-panel li").click(function(){
                $(".white-panel li").removeClass("active");
                $(this).addClass("active");
                var index=$(this).attr("index");
                $(".panelContent").addClass("none");
                $(".panelContent-"+index).removeClass("none");
            })
        });

        $.get('<%= shixun_time_college_path(@department.identifier) %>', function(data){
          $('.shixun-time').html("<span data-tip-down=\"所有学员的实训耗时之和\">" + data.shixun_time + "</span>天");
        });
        $.get('<%= shixun_report_count_college_path(@department.identifier) %>', function(data){
          $('.shixun-report-count').html("<span>" + data.shixun_report_count + "</span>个");
        });

        // 教师排名
        $.ajax({ url: '<%= teachers_college_path(@department.identifier) %>', method: 'GET', dataType: 'script' })

        $(".count_student_test a").click(function(){
            $(".count_student_test a").removeClass("active");
            $(this).addClass("active");
        });

        //初始化饼状图
        $.get('<%= shixun_chart_data_college_path(@department.identifier) %>', function(data){
          $('.pie-chart-loading').hide();
          if (data.names.length > 0) {
            $('.online_status .edu-tab-con-box').hide();
            $('#pieChart').css('height', '440px').css('width', '480px')
            InitPieChart(data.names, data.data);
          } else {
            $('.online_status .edu-tab-con-box').show();
          }
        });

        $.get('<%= course_statistics_college_path(@department.identifier) %>');
    });
    function InitPieChart(names, data){
        var Color = ['#49A9EE', '#FFD86E', '#98D87D', '#8996E6', '#F3857B', '#B97BF3','#4DE8B4','#F37BDB','#566EFF','#FF961A'];

        option = {
            title: {
                show:false
            },
            tooltip : {
                trigger: 'item',
                formatter: "{d}%"
            },
            legend: {
                //orient: 'vertical',
                // top: 'middle',
                bottom: 20,
                left: 20,
                right:20,
                data: names
            },
            series : [
                {
                    type: 'pie',
                    radius : '50%',
                    center: ['50%', '35%'],
                    selectedMode: 'single',
                    data: data,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                        normal:{
                            show: true,
                            color: function(params) {
                                return Color[params.dataIndex]
                            }
                        }
                    }
                }
            ]
        };

        var myChart = echarts.init(document.getElementById('pieChart'));
        myChart.setOption(option);
    }
</script>