1<!-- 2 Copyright (c) 2021 Huawei Device Co., Ltd. 3 Licensed under the Apache License, Version 2.0 (the "License"); 4 you may not use this file except in compliance with the License. 5 You may obtain a copy of the License at 6 7 http://www.apache.org/licenses/LICENSE-2.0 8 9 Unless required by applicable law or agreed to in writing, software 10 distributed under the License is distributed on an "AS IS" BASIS, 11 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 See the License for the specific language governing permissions and 13 limitations under the License. 14--> 15<!DOCTYPE html> 16<html lang="en"> 17<head> 18 <meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge chrome=1"> 19 <title>OHOSReport</title> 20 <!-- import CSS --> 21 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 22 <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> 23 <!-- import Vue before Element --> 24 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 25 <!-- import JavaScript --> 26 <script src="https://unpkg.com/element-ui/lib/index.js"></script> 27</head> 28<body> 29 30<div id="report_title" v-bind:class="{ title_s : true}"> 31 <template> 32 <div> 33 <h4>{{ title }}</h4> 34 </div> 35 </template> 36</div> 37 38<div id="report_summary" v-bind:class="{ subsystem_table_style : true}"> 39 <template> 40 <el-table 41 :data="summary_data" 42 border 43 size="mini" 44 :default-sort = "{prop: 'id'}" 45 row-key="id" 46 style="width: 100%"> 47 <el-table-column 48 prop="id" 49 label="ID" 50 width="100" 51 show-overflow-tooltip> 52 </el-table-column> 53 <el-table-column 54 prop="item" 55 label="Item Name" 56 show-overflow-tooltip> 57 </el-table-column> 58 <el-table-column 59 prop="content" 60 label="Value" 61 show-overflow-tooltip> 62 </el-table-column> 63 </el-table> 64 </template> 65</div> 66 67<div id="measure_title" v-bind:class="{ title_s : true}"> 68 <template> 69 <div> 70 <h4>{{ title }}</h4> 71 </div> 72 </template> 73</div> 74 75<div id="main" class="box" style="width: 1300px; height:600px;"></div> 76 77</body> 78 79<!-- report_title --> 80<script> 81 new Vue({ 82 el: '#report_title', 83 data: { title : 'Microbenchmark Details'} 84 }) 85</script> 86 87<script> 88 new Vue({ 89 el: '#measure_title', 90 data: { title : ''} 91 }) 92</script> 93 94<script> 95 new Vue({ 96 el: '#report_summary', 97 data: { 98 summary_data: OHOS_REPORT_SUMMARY, 99 }, 100 methods: { 101 handleChange: function (val) 102 { 103 console.log(val); 104 }, 105 } 106 }) 107</script> 108 109<style> 110 .title_s { 111 max-width: 1300px; 112 margin: auto; 113 background: white; 114 height: 25px; 115 color: #003399; 116 padding: 10px 8px; 117 text-align: center; 118 } 119 .error_s { 120 color: #f00000; 121 font-size: 14px; 122 } 123 .subsystem_table_style { 124 max-width: 1300px; 125 margin: auto; 126 background: white; 127 padding: 10px; 128 } 129 .el-table .warning-row { 130 background: oldlace; 131 } 132 .el-table .failed-cell { 133 color: #003399; 134 } 135 .el-table .success-row { 136 background: #f0f9eb; 137 } 138 .el-table .header-row { 139 color: #003399; 140 } 141 *{ 142 padding: 0; 143 margin: 0; 144 } 145 .box { 146 padding-top: 10px; 147 max-width: 1300px; 148 margin: auto; 149 height: 600px; 150 } 151</style> 152</html> 153