二十二.完善Dashboard頁面並更改font awesome icons

在這一章中，我們完善一下dashboard頁面，並使用一些圖標來對該系統中的一些信息做彙總。

 

1.      建立dashboard.html

我們打開ACE這個模板中的index.html，並建立dashboard.html。將相關內容複製進去。

 

Dashboard.html:

<!--繼承index.html-->
{% extends "index.html" %}
{% block page_css %}
{% endblock %}
<!--填充導航欄的頁面名稱-->
{% block page_title %}
    信息彙總
{% endblock %}
<!--放置主頁面內容-->
{% block container %}
<div class="col-sm-7 infobox-container">
            <!-- #section:pages/dashboard.infobox -->
            <div class="infobox infobox-green">
               <div class="infobox-icon">
                  <i class="ace-icon fa fa-comments"></i>
               </div>

               <div class="infobox-data">
                  <span class="infobox-data-number">32</span>
                  <div class="infobox-content">comments + 2 reviews</div>
               </div>

               <!-- #section:pages/dashboard.infobox.stat -->
               <div class="stat stat-success">8%</div>

               <!-- /section:pages/dashboard.infobox.stat -->
            </div>

            <div class="infobox infobox-blue">
               <div class="infobox-icon">
                  <i class="ace-icon fa fa-twitter"></i>
               </div>

               <div class="infobox-data">
                  <span class="infobox-data-number">11</span>
                  <div class="infobox-content">new followers</div>
               </div>

               <div class="badge badge-success">
                  +32%
                  <i class="ace-icon fa fa-arrow-up"></i>
               </div>
            </div>

            <div class="infobox infobox-pink">
               <div class="infobox-icon">
                  <i class="ace-icon fa fa-shopping-cart"></i>
               </div>

               <div class="infobox-data">
                  <span class="infobox-data-number">8</span>
                  <div class="infobox-content">new orders</div>
               </div>
               <div class="stat stat-important">4%</div>
            </div>

            <div class="infobox infobox-red">
               <div class="infobox-icon">
                  <i class="ace-icon fa fa-flask"></i>
               </div>

               <div class="infobox-data">
                  <span class="infobox-data-number">7</span>
                  <div class="infobox-content">experiments</div>
               </div>
            </div>

            <div class="infobox infobox-orange2">
               <!-- #section:pages/dashboard.infobox.sparkline -->
               <div class="infobox-chart">
                  <span class="sparkline" data-values="196,128,202,177,154,94,100,170,224"><canvas height="31" width="44" style="display: inline-block; width: 44px; height: 31px; vertical-align: top;"></canvas></span>
               </div>

               <!-- /section:pages/dashboard.infobox.sparkline -->
               <div class="infobox-data">
                  <span class="infobox-data-number">6,251</span>
                  <div class="infobox-content">pageviews</div>
               </div>

               <div class="badge badge-success">
                  7.2%
                  <i class="ace-icon fa fa-arrow-up"></i>
               </div>
            </div>

            <div class="infobox infobox-blue2">
               <div class="infobox-progress">
                  <!-- #section:pages/dashboard.infobox.easypiechart -->
                  <div style="height: 46px; width: 46px; line-height: 45px;" class="easy-pie-chart percentage" data-percent="42" data-size="46">
                     <span class="percent">42</span>%
                  <canvas width="46" height="46"></canvas></div>

                  <!-- /section:pages/dashboard.infobox.easypiechart -->
               </div>

               <div class="infobox-data">
                  <span class="infobox-text">traffic used</span>

                  <div class="infobox-content">
                     <span class="bigger-110">~</span>
                     58GB remaining
                  </div>
               </div>
            </div>

            <!-- /section:pages/dashboard.infobox -->
            <div class="space-6"></div>


         </div>
{% endblock %}

查看頁面變化

2.      對頁面內容進行更改

對這樣一個構圖，我們希望結合現有系統變成以下的內容展示

顯示內容
所採用圖標	顯示名稱	對應參數
icon-home	節點信息	node_number
icon-book	線路信息	line_number
icon-desktop	設備信息	device_number
icon-edit	任務總數	task_number
icon-check	任務完成數	task_complete
easy-pie-chart	任務完成率	task_complete_percent
排版
節點信息	線路信息	設備信息
任務總數	任務完成數	任務完成率

 

3.     結合相應內容我們對views.py中的index函數進行相應修改，並將其指向dashboard.html：

#顯示首頁
def index(request):
    #獲取相應信息
    node_number = Node.objects.count()
    line_number = Line.objects.count()
    device_number = Device.objects.count()
    task_number = Task.objects.count()
    #獲取已結單的數量,用於計算任務完成率
    task_complete = Task.objects.filter(task_status='已結單').count()
    #用float可以保留小樹，round保留小數點2位
    task_complete_percent = round(float(task_complete)/task_number*100,2)
    #將相關參數傳遞給dashboard頁面
    context = {
        'node_number': node_number,
        'line_number': line_number,
        'device_number': device_number,
        'task_number': task_number,
        'task_complete': task_complete,
        'task_complete_percent': task_complete_percent,
    }
    return render(request,'dashboard.html',context)

4.  修正dashboard.html頁面，符合排版需求，同時記得加入相應javascript，應用於easy-pie-chart，其中圖表可以根據ACE中給出的awesome圖表進行更改

這些圖標均可供選擇，只需要將相應的名稱進行替換就可以更換成相應的圖表。

 以下是更新後的dashboard.html:

<!--繼承index.html-->
{% extends "index.html" %}
{% block page_css %}

{% endblock %}
<!--填充導航欄的頁面名稱-->
{% block page_title %}
    信息彙總
{% endblock %}
<!--放置主頁面內容-->
{% block container %}
<div class="col-sm-7 infobox-container">
            <!-- #section:pages/dashboard.infobox -->
            <div class="infobox infobox-green">
               <div class="infobox-icon">
                      <!--將節點圖表更改成 home，之後的雷同-->
                  <i class="ace-icon fa fa-home"></i>
               </div>

               <div class="infobox-data">
                  <span class="infobox-data-number">{{ node_number }}</span>
                  <div class="infobox-content">節點數量</div>
               </div>

            </div>

            <div class="infobox infobox-blue">
               <div class="infobox-icon">
                  <i class="ace-icon fa fa-book"></i>
               </div>

               <div class="infobox-data">
                  <span class="infobox-data-number">{{ line_number }}</span>
                  <div class="infobox-content">線路數量</div>
               </div>

            </div>

            <div class="infobox infobox-pink">
               <div class="infobox-icon">
                  <i class="ace-icon fa fa-desktop"></i>
               </div>

               <div class="infobox-data">
                  <span class="infobox-data-number">{{ device_number }}</span>
                  <div class="infobox-content">設備數量</div>
               </div>
            </div>

            <div class="infobox infobox-red">
               <div class="infobox-icon">
                  <i class="ace-icon fa fa-edit"></i>
               </div>

               <div class="infobox-data">
                  <span class="infobox-data-number">{{ task_number }}</span>
                  <div class="infobox-content">任務總數</div>
               </div>
            </div>

            <div class="infobox infobox-orange2">
                    <div class="infobox-icon">
                  <i class="ace-icon fa fa-check"></i>
               </div>

               <div class="infobox-data">
                  <span class="infobox-data-number">{{ task_complete }}</span>
                  <div class="infobox-content">任務完成數</div>
               </div>

            </div>

            <div class="infobox infobox-blue2">
               <div class="infobox-progress">
                  <!-- #section:pages/dashboard.infobox.easypiechart -->
                        <!--以下是easy-pie-chart的顯示部分-->
                  <div style="height: 45px; width: 45px; line-height: 45px;" class="easy-pie-chart percentage" data-percent={{ task_complete_percent }} data-size="46">

                  <canvas width="46" height="46"></canvas></div>

                  <!-- /section:pages/dashboard.infobox.easypiechart -->
               </div>

               <div class="infobox-data">
                  <span class="infobox-data-number">{{ task_complete_percent }}%</span>
                  <div class="infobox-content">任務完成率</div>
               </div>
            </div>

            <!-- /section:pages/dashboard.infobox -->
            <div class="space-6"></div>


         </div>
{% endblock %}

{% block page_javascript %}
          <script type="text/javascript">
            //以下是easy-pie-chart的顯示用的js

         jQuery(function($) {
                $('.easy-pie-chart.percentage').each(function () {
                    var $box = $(this).closest('.infobox');
                    var barColor = $(this).data('color') || (!$box.hasClass('infobox-dark') ? $box.css('color') : 'rgba(255,255,255,0.95)');
                    var trackColor = barColor == 'rgba(255,255,255,0.95)' ? 'rgba(255,255,255,0.25)' : '#E2E2E2';
                    var size = parseInt($(this).data('size')) || 50;
                    $(this).easyPieChart({
                        barColor: barColor,
                        trackColor: trackColor,
                        scaleColor: false,
                        lineCap: 'butt',
                        lineWidth: parseInt(size / 10),
                        animate: /msie\s*(8|7|6)/.test(navigator.userAgent.toLowerCase()) ? false : 1000,
                        size: size
                    });
                })

            })
                </script>

{% endblock %}

5.     在index.html中更改dashboard的連接：

<ul class="nav nav-list">
   <li class="">
      <a href="{% url 'index'%}">
         <i class="menu-icon fa fa-tachometer"></i>
         <span class="menu-text"> Dashboard </span>
      </a>

      <b class="arrow"></b>
   </li>

6.      驗證頁面：