diff --git a/httprunner/templates/extent_report_template.html b/httprunner/templates/extent_report_template.html
index e9ab26d9..6f563722 100644
--- a/httprunner/templates/extent_report_template.html
+++ b/httprunner/templates/extent_report_template.html
@@ -1,18 +1,21 @@
 <!DOCTYPE html>
 <html>
 
+
 <head>
     <meta charset='utf-8'/>
     <meta name='description' content=''/>
     <meta name='robots' content='noodp, noydir'/>
     <meta name='viewport' content='width=device-width, initial-scale=1'/>
     <meta id="timeStampFormat" name="timeStampFormat" content='MMM d, yyyy hh:mm:ss a'/>
+
     <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css'>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
     <link href='http://extentreports.com/resx/dist/css/extent.css' type='text/css' rel='stylesheet'/>
 
+    <title>{{ html_report_name }} - TestReport</title>
 
-    <title>接口自动化测试报告</title>
     <style type='text/css'>
         .node.level-1 ul {
             display: none;
@@ -29,35 +32,36 @@
 </head>
 
 <body class='extent standard default hide-overflow dark'>
-<div id='theme-selector' alt='Click to toggle theme. To enable by default, use theme configuration.'
-     title='Click to toggle theme. To enable by default, use theme configuration.'>
+<div id='theme-selector' alt='切换主题，默认黑色' title='切换主题'>
     <span><i class='material-icons'>desktop_windows</i></span>
 </div>
+
 <nav>
     <div class="nav-wrapper">
-        <a href="#!" class="brand-logo blue darken-3">Extent</a>
+        <a href="#!" class="brand-logo blue darken-3">API</a>
+
         <!-- slideout menu -->
         <ul id='slide-out' class='side-nav fixed hide-on-med-and-down'>
-            <li class='waves-effect active'>
-                <a href='#!' view='test-view' onclick="configureView(0);chartsView('test');" title="报告详情">
-                    <i class='material-icons'>dashboard</i>
-                </a>
-            </li>
-            <li class='waves-effect'>
-                <a href='#!' onclick="configureView(-1);chartsView('dashboard');" view='dashboard-view' title="报告概览">
-                    <i class='material-icons'>track_changes</i></i>
-                </a>
+            <li class='waves-effect active'><a href='#!' view='test-view'
+                                               onclick="configureView(0);chartsView('test');"><i class='material-icons'>dashboard</i></a>
             </li>
+            <li class='waves-effect'><a href='#!' view='category-view' onclick="configureView(1)"><i
+                    class='material-icons'>label_outline</i></a></li>
+            <li class='waves-effect'><a href='#!' onclick="configureView(-1);chartsView('dashboard');"
+                                        view='dashboard-view'><i class='material-icons'>track_changes</i></a></li>
         </ul>
+
         <!-- report name -->
         <span class='report-name'>Test Report: {{ html_report_name }}</span>
+
         <!-- report headline -->
         <span class='report-headline'></span>
+
         <!-- nav-right -->
         <ul id='nav-mobile' class='right hide-on-med-and-down nav-right'>
             <li>
                 <a href='#!'>
-                    <span class='label suite-start-time blue darken-3'>{{ time.start_at.strftime('%Y-%m-%d %H:%M:%S') }}</span>
+                    <span class='label suite-start-time blue darken-3'>{{ time.start_datetime }}</span>
                 </a>
             </li>
             <li>
@@ -65,12 +69,25 @@
                     <span class='label blue darken-3'>HttpRunner {{ platform.httprunner_version }} </span>
                 </a>
             </li>
+            <li>
+                <a href='#!'>
+                    <span class='label blue darken-3'>{{ platform.python_version }} </span>
+                </a>
+            </li>
+            <li>
+                <a href='#!'>
+                    <span class='label blue darken-3'>{{ platform.platform }}</span>
+                </a>
+            </li>
         </ul>
     </div>
 </nav>
+
 <!-- container -->
 <div class='container'>
+
     <div id='test-view' class='view'>
+
         <section id='controls'>
             <div class='controls grey lighten-4'>
                 <!-- test toggle -->
@@ -79,18 +96,37 @@
                        data-beloworigin='true' data-hover='true' href='#'>
                         <i class='material-icons'>warning</i> Status
                     </a>
-                     <ul id='tests-toggle' class='dropdown-content'>
+                    <ul id='tests-toggle' class='dropdown-content'>
                         <li status='pass'><a href='#!'>Pass <i class='material-icons green-text'>check_circle</i></a>
                         </li>
                         <li status='fail'><a href='#!'>Fail <i class='material-icons red-text'>cancel</i></a></li>
+                        <li status="skip"><a href="#!">Skip <i class="material-icons cyan-text">redo</i></a></li>
                         <li class='divider'></li>
                         <li status='clear' clear='true'><a href='#!'>Clear Filters <i
                                 class='material-icons'>clear</i></a></li>
                     </ul>
                 </div>
                 <!-- test toggle -->
+
                 <!-- category toggle -->
+                <div class='chip transparent'>
+                    <a class='dropdown-button category-toggle' data-activates='category-toggle'
+                       data-constrainwidth='false' data-beloworigin='true' data-hover='true' href='#'>
+                        <i class='material-icons'>local_offer</i> Category
+                    </a>
+                    <ul id='category-toggle' class='dropdown-content'>
+                        {% for test_suite_summary in details %}
+                            <li><a href='#'>{{ test_suite_summary.name }}</a>
+                            </li>
+                        {% endfor %}
+
+
+                        <li class='divider'></li>
+                        <li class='clear'><a href='#!' clear='true'>Clear Filters</a></li>
+                    </ul>
+                </div>
                 <!-- category toggle -->
+
                 <!-- clear filters -->
                 <div class='chip transparent hide'>
                     <a class='' id='clear-filters' alt='Clear Filters' title='Clear Filters'>
@@ -98,6 +134,7 @@
                     </a>
                 </div>
                 <!-- clear filters -->
+
                 <!-- enable dashboard -->
                 <div id='toggle-test-view-charts' class='chip transparent'>
                     <a class='pink-text' id='enable-dashboard' alt='Enable Dashboard' title='Enable Dashboard'>
@@ -105,184 +142,277 @@
                     </a>
                 </div>
                 <!-- enable dashboard -->
+
                 <!-- search -->
-                <div class='chip transparent' alt='Search Tests' title='Search Tests' style="color: white;">
+                <div class='chip transparent' alt='Search Tests' title='Search Tests'>
                     <a href="#" class='search-div'>
                         <i class='material-icons'>search</i> Search
                     </a>
+
                     <div class='input-field left hide'>
-                        <input id='search-tests' type='text' class='validate browser-default'
+                        <input style="color: red" id='search-tests' type='text' class='validate browser-default'
                                placeholder='Search Tests...'>
                     </div>
+
                 </div>
                 <!-- search -->
             </div>
         </section>
+
+
         <div id='test-view-charts' class='subview-full'>
-            <div id='charts-row' class='row nm-v nm-h'>
-                <div class='col s12 m6 l6 np-h'>
-                    <div class='card-panel nm-v'>
-                        <div class='left panel-name'>Tests</div>
-                        <div class='chart-box'>
-                            <canvas id='parent-analysis' width='100' height='80'></canvas>
-                        </div>
-                        <div class='block text-small'>
-                                <span class='tooltipped' data-position='top' data-tooltip='0%'>
-                                    <span class='strong'>{{ stat.successes }}</span> test(s) passed</span>
-                        </div>
-                        <div class='block text-small'>
+
+            <div id='test-view-charts' class='subview-full'>
+                <div id='charts-row' class='row nm-v nm-h'>
+                    <div class='col s12 m6 l6 np-h'>
+                        <div class='card-panel nm-v'>
+                            <div class='left panel-name'>Tests</div>
+                            <div class='chart-box'>
+                                <canvas id='parent-analysis' width='100' height='80'></canvas>
+                            </div>
+                            <div class='block text-small'>
+                            <span class='tooltipped' data-position='top' data-tooltip='25%'><span
+                                    class='strong'>{{ stat.successes }}</span> test(s) passed</span>
+                            </div>
+                            <div class='block text-small'>
                             <span class='strong tooltipped' data-position='top'
-                                  data-tooltip='100%'>{{ stat.errors }}</span> test(s) failed,
-                            <span class='strong tooltipped' data-position='top'
-                                  data-tooltip='0%'>{{ stat.skipped }}</span> test(s) skipped
+                                  data-tooltip='62.5%'>{{ stat.errors }}</span> test(s)
+                                failed, <span class='strong tooltipped' data-position='top'
+                                              data-tooltip='12.5%'>{{ stat.skipped }}</span>
+                                test(s) skipped
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class='col s12 m6 l6 np-h'>
-                    <div class='card-panel nm-v'>
-                        <div class='left panel-name'>Steps</div>
-                        <div class='chart-box'>
-                            <canvas id='child-analysis' width='100' height='80'></canvas>
-                        </div>
-                        <div class='block text-small'>
-                            <span class='tooltipped' data-position='top' data-tooltip='0%'>
-                                <span class='strong'>{{ stat.expectedFailures }}</span>test(s) expectedFailures</span>
-                        </div>
-                        <div class='block text-small'>
-                            <span class='strong tooltipped' data-position='top'
-                                  data-tooltip='100%'>{{ stat.unexpectedSuccesses }}</span>test(s) unexpectedSuccesses
+
+                    <div class='col s12 m6 l6 np-h'>
+                        <div class='card-panel nm-v'>
+                            <div class='left panel-name'>Suites</div>
+                            <div class='chart-box'>
+                                <canvas id='child-analysis' width='100' height='80'></canvas>
+                            </div>
+                            <div class='block text-small'>
+                            <span id="pass_suites" class='tooltipped' data-position='top' data-tooltip='25%'>
+
+                            </span>
+                            </div>
+                            <div class='block text-small'>
+                                <span id="fail_suites" class='strong tooltipped' data-position='top'
+                                      data-tooltip='62.5%'></span> suite(s) failed
+                            </div>
                         </div>
                     </div>
+
                 </div>
             </div>
-
         </div>
+
         <div class='subview-left left'>
+
             <div class='view-summary'>
-                <h5>Tests</h5>
+                <h5>Suites</h5>
                 <ul id='test-collection' class='test-collection'>
-                    {% for record in records %}
-                        {% if record.status == 'success' %}
-                            <li class='test displayed active pass' status='pass' bdd='pass'
-                                test-id='{{ loop.index }}'>
-                                <div class='test-heading'>
-                                    <span class='test-name'>{{ record.name }}</span>
-                                    <span class='test-time'>{{ record.meta_data.response_time_ms }} ms</span>
-                                    <span class='test-status right pass'>pass</span>
-                                </div>
-                                {% elif record.status == 'error' %}
-                            <li class='test displayed active fail' status='fail' bdd='fail'
-                                test-id='{{ loop.index }}'>
-                            <div class='test-heading'>
-                                <span class='test-name'>{{ record.name }}</span>
-                                <span class='test-time'>{{ record.meta_data.response_time_ms }} ms</span>
-                                <span class='test-status right fail'>fail</span>
-                            </div>
+
+                    {% for test_suite_summary in details %}
+                        {% if test_suite_summary.success == true %}
+                            <li class='test displayed active has-leaf pass' status='pass' bdd='true'
+                                test-id='{{ test_suite_summary.name }}_{{ loop.index }}'>
+                                {% else %}
+                            <li class='test displayed active has-leaf fail' status='fail' bdd='false'
+                                test-id='{{ test_suite_summary.name }}_{{ loop.index }}'>
                         {% endif %}
-                    <div class='test-content hide'>
-                        <div class='test-time-info'>
-                            <span class='label start-time'>{{ record.meta_data.response_time_ms }} ms</span>
+                        <div class='test-heading'>
+                            <span class='test-name'>{{ test_suite_summary.name }}</span>
+                            <span class='test-time'>{{ test_suite_summary.base_url }}</span>
+                            {% if test_suite_summary.success == true %}
+                                <span class='test-status right pass'>pass</span>
+                            {% else %}
+                                <span class='test-status right fail'>fail</span>
+                            {% endif %}
+
+
                         </div>
-                        <div class='test-steps'>
-                            <table class='bordered table-results'>
-                                <thead>
-                                <tr>
-                                    <th>Status</th>
-                                    <th>Identity</th>
-                                    <th>Details</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                <tr class='log' status='info'>
-                                    <td class='status info' title='info' alt='info'><i
-                                            class='material-icons'>low_priority</i></td>
-                                    <td class='timestamp'>url</td>
-                                    <td class='step-details'>{{ record.meta_data.url }}</td>
-                                </tr>
-                                <tr class='log' status='info'>
-                                    <td class='status info' title='info' alt='info'><i
-                                            class='material-icons'>low_priority</i></td>
-                                    <td class='timestamp'>method</td>
-                                    <td class='step-details'>{{ record.meta_data.method }}</td>
-                                </tr>
-                                <tr class='log' status='info'>
-                                    <td class='status info' title='info' alt='info'><i
-                                            class='material-icons'>low_priority</i></td>
-                                    <td class='timestamp'>status_code</td>
-                                    <td class='step-details'>{{ record.meta_data.status_code }}</td>
-                                </tr>
-                                <tr class='log' status='debug'>
-                                    <td class='status debug' title='debug' alt='debug'><i
-                                            class='material-icons'>low_priority</i></td>
-                                    <td class='timestamp'>req_headers</td>
-                                    <td class='step-details'>
-                                        {% for key, value in record.meta_data.request_headers.items() %}
-                                            <div>
-                                                <strong>{{ key }}</strong>: {{ value }}
-                                            </div>
-                                        {% endfor %}</td>
-                                </tr>
-                                <tr class='log' status='debug'>
-                                    <td class='status debug' title='debug' alt='debug'><i
-                                            class='material-icons'>low_priority</i></td>
-                                    <td class='timestamp'>req_body</td>
-                                    <td class='step-details'>{{ record.meta_data.request_body }}</td>
-                                </tr>
-                                <tr class='log' status='debug'>
-                                    <td class='status debug' title='debug' alt='debug'><i
-                                            class='material-icons'>low_priority</i></td>
-                                    <td class='timestamp'>resp_headers</td>
-                                    <td class='step-details'>
-                                        {% for key, value in record.meta_data.response_headers.items() %}
-                                            <div>
-                                                <strong>{{ key }}</strong>: {{ value }}
-                                            </div>
-                                        {% endfor %}</td>
-                                </tr>
-                                <tr class='log' status='debug'>
-                                    <td class='status debug' title='debug' alt='debug'><i
-                                            class='material-icons'>low_priority</i></td>
-                                    <td class='timestamp'>resp_body</td>
-                                    <td class='step-details'>
-                                        {% if record.meta_data.response_data_type == "image" %}
-                                            <img src="{{ record.meta_data.response_body }}"/>
-                                        {% else %}
-                                            <pre>{{ record.meta_data.response_body }}</pre>
-                                        {% endif %}
-                                    </td>
-                                </tr>
+                        <div class='test-content hide'>
+                            <div class='test-time-info'>
+                                <span class='label start-time'>{{ test_suite_summary.time.start_at }}</span>
+                                <span class='label end-time'>{{ '%0.3f'| format(test_suite_summary.time.duration|float) }} seconds</span>
+                            </div>
+                            <div class='test-desc'>Pass: {{ test_suite_summary.stat.successes }} ;
+                                Fail: {{ test_suite_summary.stat.errors }} ;
+                                Skip: {{ test_suite_summary.stat.skipped }} ;
+                                Error: {{ test_suite_summary.stat.failures }}</div>
+                            <div class='test-attributes'>
+                                <div class='category-list'>
+                                    <span class='category label white-text'>{{ test_suite_summary.name }}</span>
+                                    <span class='category label white-text'>{{ test_suite_summary.base_url }}</span>
+                                </div>
+                            </div>
+                            <ul class='collapsible node-list' data-collapsible='accordion'>
+                                {% for record in test_suite_summary.records %}
+                                    {% if  record.status == 'success' %}
+                                        <li class='node level-1 leaf pass' status='pass'
+                                            test-id='{{ test_suite_summary.name }}_{{ record.name }}_{{ loop.index }}'>
+                                            {% elif record.status == 'error' %}
+                                        <li class='node level-1 leaf fail' status='fail'
+                                            test-id='{{ test_suite_summary.name }}_{{ record.name }}_{{ loop.index }}'>
+                                            {% elif record.status == 'skipped' %}
+                                        <li class='node level-1 leaf skip' status='skip'
+                                            test-id='{{ test_suite_summary.name }}_{{ record.name }}_{{ loop.index }}'>
+                                    {% endif %}
+                                <div class='collapsible-header'>
+                                    <div class='node-name'>{{ record.name }}</div>
+                                    <span class='node-time'>{{ record.start_timestamp }}</span>
+                                    <span class='node-duration'>{{ record.meta_data.response.response_time_ms }}</span>
+                                    {% if  record.status == 'success' %}
+                                        <span class='test-status right pass'>pass</span>
+                                    {% elif record.status == 'error' %}
+                                        <span class='test-status right fail'>fail</span>
+                                    {% elif record.status == 'skipped' %}
+                                        <span class='test-status right skip'>skip</span>
+                                    {% endif %}
 
-                                <tr class='log' status='debug'>
-                                    <td class='status debug' title='debug' alt='debug'><i
-                                            class='material-icons'>low_priority</i></td>
-                                    <td class='timestamp'>content_size</td>
-                                    <td class='step-details'>{{ record.meta_data.content_size }} bytes</td>
-                                </tr>
+                                </div>
+                                <div class='collapsible-body'>
+                                    <div class='category-list right'>
+                                        <span class='category label white-text'>{{ test_suite_summary.name }}</span>
+                                        <span class='category label white-text'>{{ record.name }}</span>
+                                    </div>
+                                    <div class='node-steps'>
+                                        <table class='bordered table-results'>
+                                            <thead>
+                                            <tr>
+                                                <th>Status</th>
+                                                <th>Params</th>
+                                                <th>Details</th>
+                                            </tr>
+                                            </thead>
+                                            <tbody>
+                                            <tr class='info' status='info'>
+                                                <td class='status info' title='info' alt='info'><i
+                                                        class='material-icons'>low_priority</i></td>
+                                                <td class='timestamp'>url</td>
+                                                <td class='step-details'>{{ record.meta_data.request.url }}</td>
+                                            </tr>
+                                            <tr class='info' status='info'>
+                                                <td class='status info' title='info' alt='info'><i
+                                                        class='material-icons'>low_priority</i></td>
+                                                <td class='timestamp'>method</td>
+                                                <td class='step-details'>{{ record.meta_data.request.method }}</td>
+                                            </tr>
+                                            <tr class='info' status='info'>
+                                                <td class='status info' title='info' alt='info'><i
+                                                        class='material-icons'>low_priority</i></td>
+                                                <td class='timestamp'>status_code</td>
+                                                <td class='step-details'>{{ record.meta_data.response.status_code }}</td>
+                                            </tr>
+                                            {% for key, value in record.meta_data.request.items() %}
+                                                {% if key != 'url' and key != 'method' %}
+                                                    <tr class='log' status='debug'>
+                                                        <td class='status debug' title='debug' alt='debug'><i
+                                                                class='material-icons'>low_priority</i></td>
+                                                        <td class='timestamp'>{{ key }}</td>
+                                                        <td class='step-details'>
+                                                            {% if key == "headers" %}
+                                                                {% for header_key, header_value in record.meta_data.request.headers.items() %}
+                                                                    <div>
+                                                                        <strong>{{ header_key }}</strong>: {{ header_value }}
+                                                                    </div>
+                                                                {% endfor %}
+                                                            {% else %}
+                                                                {{ value }}
+                                                            {% endif %}
+                                                        </td>
 
-                                {% if record.attachment != '' %}
-                                    <tr class='log' status='fail'>
-                                        <td class='status fail' title='fail' alt='fail'><i
-                                                class='material-icons'>cancel</i></td>
-                                        <td class='timestamp'>exception:</td>
-                                        <td class='step-details'>
-                                            <pre>{{ record.attachment }}</pre>
-                                        </td>
-                                    </tr>
+                                                    </tr>
+                                                {% endif %}
+                                            {% endfor %}
 
-                                {% endif %}
-                                </tbody>
-                            </table>
+                                            {% for key, value in record.meta_data.response.items() %}
+                                                {% if key != 'status_code' %}
+                                                    <tr class='log' status='debug'>
+                                                        <td class='status debug' title='debug' alt='debug'><i
+                                                                class='material-icons'>low_priority</i></td>
+                                                        <td class='timestamp'>{{ key }}</td>
+                                                        <td class='step-details'>
+                                                            {% if key == "headers" %}
+                                                                {% for header_key, header_value in record.meta_data.request.headers.items() %}
+                                                                    <div>
+                                                                        <strong>{{ header_key }}</strong>: {{ header_value }}
+                                                                    </div>
+                                                                {% endfor %}
+                                                            {% elif key == "content_type" %}
+                                                                {% if value == "image" %}
+                                                                    <img src="{{ record.meta_data.response.body }}"/>
+                                                                {% else %}
+                                                                    <pre>{{ record.meta_data.response.body }}</pre>
+                                                                {% endif %}
+                                                            {% else %}
+                                                                {{ value }}
+                                                            {% endif %}
+                                                        </td>
+                                                    </tr>
+                                                {% endif %}
+                                            {% endfor %}
+
+                                            <tr class='log' status='pass'>
+                                                <td class='status pass' title='pass' alt='pass'><i
+                                                        class='material-icons'>low_priority</i></td>
+                                                <td class='timestamp'>Validators</td>
+                                                <td class='step-details'>
+                                                    {% for validator in record.meta_data.validators %}
+                                                        <div>
+                                                            <strong>{{ validator.comparator }}:</strong>[ {{ validator.expect }}
+                                                            ,&nbsp;&nbsp;{{ validator.check_value }} ]
+                                                        </div>
+                                                    {% endfor %}
+                                                </td>
+                                            </tr>
+
+                                            <tr class='info' status='info'>
+                                                <td class='status info' title='info' alt='info'><i
+                                                        class='material-icons'>low_priority</i></td>
+                                                <td class='timestamp'>Statistics</td>
+                                                <td class='step-details'>
+                                                    <div>
+                                                        content_size(bytes): {{ record.meta_data.response.content_size }}
+                                                    </div>
+                                                    <div>
+                                                        response_time(ms): {{ record.meta_data.response.response_time_ms }}
+                                                    </div>
+                                                    <div>
+                                                        elapsed(ms): {{ record.meta_data.response.elapsed_ms }}
+                                                    </div>
+                                                </td>
+                                            </tr>
+
+
+                                            {% if record.attachment %}
+                                                <tr class='log' status='fail'>
+                                                    <td class='status fail' title='fail' alt='fail'><i
+                                                            class='material-icons'>cancel</i></td>
+                                                    <td class='timestamp'>exception:</td>
+                                                    <td class='step-details'>
+                                                        <pre>{{ record.attachment }}</pre>
+                                                    </td>
+                                                </tr>
+                                            {% endif %}
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                                </li>
+                                {% endfor %}
+                            </ul>
                         </div>
-                    </div>
-                    </li>
                     {% endfor %}
                 </ul>
             </div>
         </div>
         <!-- subview left -->
+
         <div class='subview-right left'>
             <div class='view-summary'>
                 <h5 class='test-name'></h5>
+
                 <div id='step-filters' class="right">
                     <span class="blue-text" status="info" alt="info" title="info"><i
                             class="material-icons">info_outline</i></span>
@@ -293,7 +423,8 @@
                             class="material-icons">cancel</i></span>
                     <span class="pink-text text-lighten-1" status="error" alt="error" title="error"><i
                             class="material-icons">error</i></span>
-                    <span class="orange-text" alt="warning" status="warning" title="warning"><i class="material-icons">warning</i></span>
+                    <span class="orange-text" alt="warning" status="warning" title="warning"><i
+                            class="material-icons">warning</i></span>
                     <span class="teal-text" status="skip" alt="skip" title="skip"><i
                             class="material-icons">redo</i></span>
                     <span status="clear" alt="Clear filters" title="Clear filters"><i
@@ -301,20 +432,163 @@
                 </div>
             </div>
         </div>
-        <!-- subview right -->
     </div>
+    <!-- subview right -->
     <!-- test view -->
+    <div id='category-view' class='view hide'>
+
+        <section id='controls'>
+            <div class='controls grey lighten-4'>
+                <!-- search -->
+                <div class='chip transparent' alt='Search Tests' title='Search Tests'>
+                    <a href="#" class='search-div'>
+                        <i class='material-icons'>search</i> Search
+                    </a>
+
+                    <div class='input-field left hide'>
+                        <input id=style="color: red;" id='search-tests' type='text'
+                        class='validate browser-default'
+                        placeholder='Search Tests...'>
+                    </div>
+
+                </div>
+                <!-- search -->
+            </div>
+        </section>
+
+        <div class='subview-left left'>
+
+            <div class='view-summary'>
+                <h5>Categories</h5>
+                <ul id='category-collection' class='category-collection'>
+
+                    <li class='category displayed active'>
+                        <div class='category-heading'>
+                            <span class='category-name'>All Suites</span>
+                            <span class='category-status right'>
+							    <span class='label pass'>{{ stat.successes }} </span>
+                                {% if stat.errors != 0 %}
+                                    <span class='label fail'>{{ stat.errors }}</span>
+                                {% endif %}
+                                {% if stat.skipped != 0 %}
+                                    <span class='label skip'>{{ stat.skipped }}</span>
+                                {% endif %}
+                                </span>
+                        </div>
+                        <div class='category-content hide'>
+                            <div class='category-status-counts'>
+                                <span class='label green accent-4 white-text'>Passed: {{ stat.successes }}</span>
+                                <span class='label red lighten-1 white-text'>Failed: {{ stat.errors }}</span>
+                                <span class="label yellow darken-2 white-text">Skipped: {{ stat.skipped }}</span>
+                            </div>
+
+                            <div class='category-tests'>
+                                <table class='bordered table-results'>
+                                    <thead>
+                                    <tr>
+                                        <th>Timestamp</th>
+                                        <th>TestName</th>
+                                        <th>Status</th>
+                                    </tr>
+                                    </thead>
+                                    <tbody>
+                                    {% for test_suite_summary in details %}
+                                        <tr style="border: 1px solid #49cc90; background-color: rgba(73, 204, 144, .1)">
+                                            <td>{{ test_suite_summary.time.start_at }}</td>
+                                            <td class='linked'
+                                                test-id='{{ test_suite_summary.name }}_{{ loop.index }}'>{{ test_suite_summary.name }}</td>
+                                            {% if test_suite_summary.success == true %}
+                                                <td><span class='test-status pass'>pass</span></td>
+                                            {% else %}
+                                                <td><span class='test-status fail'>fail</span></td>
+                                            {% endif %}
+
+                                        </tr>
+                                        {% for record in test_suite_summary.records %}
+                                            <tr>
+                                                <td>{{ record.meta_data.request.start_timestamp }}</td>
+                                                <td class='linked'
+                                                    test-id='{{ test_suite_summary.name }}_{{ record.name }}_{{ loop.index }}'>{{ record.name }}</td>
+                                                {% if record.status == 'success' %}
+                                                    <td><span class='test-status pass'>pass</span></td>
+                                                {% else %}
+                                                    <td><span class='test-status fail'>fail</span></td>
+                                                {% endif %}
+                                            </tr>
+                                        {% endfor %}
+                                    {% endfor %}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    </li>
+
+                    {% for test_suite_summary in details %}
+                        <li class='category displayed active'>
+                            <div class='category-heading'>
+                                <span class='category-name'>{{ test_suite_summary.name }}</span>
+                                <span class='category-status right'>
+							    <span class='label pass'>{{ test_suite_summary.stat.successes }} </span>
+                                    {% if test_suite_summary.stat.errors != 0 %}
+                                        <span class='label fail'>{{ test_suite_summary.stat.errors }}</span>
+                                    {% endif %}
+                                    {% if test_suite_summary.stat.skipped != 0 %}
+                                        <span class='label skip'>{{ test_suite_summary.stat.skipped }}</span>
+                                    {% endif %}
+                                </span>
+                            </div>
+                            <div class='category-content hide'>
+                                <div class='category-status-counts'>
+                                    <span class='label green accent-4 white-text'>Passed: {{ test_suite_summary.stat.successes }}</span>
+                                    <span class='label red lighten-1 white-text'>Failed: {{ test_suite_summary.stat.errors }}</span>
+                                    <span class="label yellow darken-2 white-text">Skipped: {{ test_suite_summary.stat.skipped }}</span>
+                                </div>
+
+                                <div class='category-tests'>
+                                    <table class='bordered table-results'>
+                                        <thead>
+                                        <tr>
+                                            <th>Timestamp</th>
+                                            <th>TestName</th>
+                                            <th>Status</th>
+                                        </tr>
+                                        </thead>
+                                        <tbody>
+                                        {% for record in test_suite_summary.records %}
+                                            <tr>
+                                                <td>{{ record.meta_data.request.start_timestamp }}</td>
+                                                <td class='linked'
+                                                    test-id='{{ test_suite_summary.name }}_{{ record.name }}_{{ loop.index }}'>{{ record.name }}</td>
+                                                {% if record.status == 'success' %}
+                                                    <td><span class='test-status pass'>pass</span></td>
+                                                {% else %}
+                                                    <td><span class='test-status fail'>fail</span></td>
+                                                {% endif %}
+                                            </tr>
+                                        {% endfor %}
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </div>
+
+        <div class='subview-right left'>
+            <div class='view-summary'>
+                <h5 class='category-name'></h5>
+            </div>
+        </div>
+    </div>
     <!-- category view -->
+
     <div id='dashboard-view' class='view hide'>
         <div class='card-panel transparent np-v'>
             <h5>Dashboard</h5>
+
             <div class='row'>
-                <div class='col s2'>
-                    <div class='card-panel r'>
-                        Tests
-                        <div class='panel-lead'>{{ stat.testsRun }}</div>
-                    </div>
-                </div>
                 <div class='col s2'>
                     <div class='card-panel r'>
                         Pass
@@ -336,7 +610,7 @@
                 <div class='col s2'>
                     <div class='card-panel r'>
                         Start
-                        <div class='panel-lead'>{{ time.start_at.strftime('%Y-%m-%d %H:%M:%S') }}</div>
+                        <div class='panel-lead'>{{ time.start_datetime }}</div>
                     </div>
                 </div>
                 <div class='col s2'>
@@ -345,60 +619,93 @@
                         <div class='panel-lead'>{{ '%0.3f'| format(time.duration|float) }} seconds</div>
                     </div>
                 </div>
+                <div class='col s4'>
+                    <div class='card-panel'>
+                        <span class='right label cyan white-text'>Categories</span>
+                        <p>&nbsp;</p>
+                        <table>
+                            <tr>
+                                <th>Name</th>
+                                <th>Passed</th>
+                                <th>Failed</th>
+                                <th>Skipped</th>
+                                <th>Error</th>
+                            </tr>
+                            <tr>
+                                <td>All Suites</td>
+                                <td>{{ stat.successes }}</td>
+                                <td>{{ stat.errors }}</td>
+                                <td>{{ stat.skipped }}</td>
+                                <td>{{ stat.failures }}</td>
+                            </tr>
 
-                <div class='col s2'>
-                    <div class='card-panel r'>
-                        PLATFORM
-                        <div class='panel-lead'>HttpRunner {{ platform.httprunner_version }}</div>
+                            {% for test_suite_summary in details %}
+                                <tr>
+                                    <td>{{ test_suite_summary.name }}</td>
+                                    <td>{{ test_suite_summary.stat.successes }}</td>
+                                    <td>{{ test_suite_summary.stat.errors }}</td>
+                                    <td>{{ test_suite_summary.stat.skipped }}</td>
+                                    <td>{{ test_suite_summary.stat.failures }}</td>
+                                </tr>
+                            {% endfor %}
+                        </table>
                     </div>
                 </div>
-
-                <div class='col s2'>
-                    <div class='card-panel r'>
-                        Python Version
-                        <div class='panel-lead'>{{ platform.python_version }}</div>
-                    </div>
-                </div>
-
-                <div class='col s2'>
-                    <div class='card-panel r'>
-                        Agent
-                        <div class='panel-lead'>{{ platform.platform }}</div>
-                    </div>
-                </div>
-
             </div>
         </div>
     </div>
     <!-- dashboard view -->
     <!-- testrunner-logs view -->
+    <!-- container -->
 </div>
-<!-- container -->
 <script>
+    var test_suite_success = 0;
+    {%for test_suite_summary in details %}
+        {% if test_suite_summary.success == true %}
+            test_suite_success = test_suite_success + 1;
+        {% endif %}
+
+    {% endfor %}
+
     var statusGroup = {
         passParent: {{ stat.successes }},
         failParent: {{ stat.errors }},
         fatalParent: 0,
-        errorParent: {{ stat.failures }},
+        errorParent: 0,
         warningParent: 0,
         skipParent: {{ stat.skipped }},
-        exceptionsParent: {{ stat.expectedFailures }},
+        exceptionsParent: 0,
 
-        passChild: {{ stat.successes }},
-        failChild: {{ stat.errors }},
+        passChild: test_suite_success,
+        failChild: {{ details|length }} -test_suite_success,
         fatalChild: 0,
-        errorChild: {{ stat.failures }},
+        errorChild: 0,
         warningChild: 0,
-        skipChild: {{ stat.skipped }},
+        skipChild: 0,
         infoChild: 0,
-        exceptionsChild: {{ stat.expectedFailures }},
+        exceptionsChild: 0,
 
+        passGrandChild: 0,
+        failGrandChild: 0,
+        fatalGrandChild: 0,
+        errorGrandChild: 0,
+        warningGrandChild: 0,
+        skipGrandChild: 0,
+        infoGrandChild: 0,
+        exceptionsGrandChild: 0,
     };
+
+    document.getElementById('pass_suites').innerHTML = "<span class='strong'>" + test_suite_success + "</span> suite(s) passed";//找到id为'myId'的标签内插入html变量的值
+    document.getElementById('fail_suites').innerText = {{ details|length }} -test_suite_success;//找到id为'myId'的标签替换它的内容为html的值
+
 </script>
+
 <script src='http://extentreports.com/resx/dist/js/extent.js' type='text/javascript'></script>
+
+
 <script type='text/javascript'>
     $(window).off("keydown");
 </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
