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><span><%= @shixun_report_count %></span>个</li>
      <li><span data-tip-down="所有学员的实训耗时之和"><span><%= @shixun_time_sum %></span>天</span></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(@school) %>" 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>
            <% @teachers.each_with_index do |teacher, index| %>
                <tr>
                  <td class="pl20 pr20">
                    <% if index < 3 %>
                        <img src="/images/educoder/competition/<%= index + 1 %>.png" width="18px" height="22px" class="mt8"/></td>
                    <% else %>
                        <%= index + 1 %>
                    <% end %>
                  <td class="color-dark"><a href="<%= user_path(teacher['login']) %>" target="_blank" class="task-hide" style="max-width: 84px;"><%= teacher['real_name'] %></a></td>
                  <td><%= teacher['course_count'] %></td>
                  <td><%= teacher['shixun_work_count'] %></td>
                  <td><%= teacher['un_shixun_work_count'] %></td>
                  <td><%= teacher['student_count'] %></td>
                  <td><%= teacher['complete_rate'] %>%</td>
                  <td class="color-blue"><%= teacher['publish_shixun_count'].to_i %></td>
                </tr>
              <% end %>
              </tbody>
            </table>
        </div>
      </div>
      <div class="fl width40">
        <div class="online_status static_shadow">
          <p class="font-24 padding30-20">在线实训情况</p>
          <div id="pieChart" style="height: 440px;width: 480px;"></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('<%= course_statistics_college_path(@school) %>');

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

        //初始化饼状图
        InitPieChart();
    });
    function InitPieChart(){
        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: <%= raw @shixun_tags_name %>
            },
            series : [
                {
                    type: 'pie',
                    radius : '50%',
                    center: ['50%', '35%'],
                    selectedMode: 'single',
                    data:<%= raw @shixun_tags_data.to_json %>,
                    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>