13f085823Sopenharmony_ci<!--
23f085823Sopenharmony_ci  Copyright (c) 2021 Huawei Device Co., Ltd.
33f085823Sopenharmony_ci  Licensed under the Apache License, Version 2.0 (the "License");
43f085823Sopenharmony_ci  you may not use this file except in compliance with the License.
53f085823Sopenharmony_ci  You may obtain a copy of the License at
63f085823Sopenharmony_ci
73f085823Sopenharmony_ci      http://www.apache.org/licenses/LICENSE-2.0
83f085823Sopenharmony_ci
93f085823Sopenharmony_ci  Unless required by applicable law or agreed to in writing, software
103f085823Sopenharmony_ci  distributed under the License is distributed on an "AS IS" BASIS,
113f085823Sopenharmony_ci  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
123f085823Sopenharmony_ci  See the License for the specific language governing permissions and
133f085823Sopenharmony_ci  limitations under the License.
143f085823Sopenharmony_ci-->
153f085823Sopenharmony_ci<!DOCTYPE html>
163f085823Sopenharmony_ci<html lang="en">
173f085823Sopenharmony_ci<head>
183f085823Sopenharmony_ci    <meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge chrome=1">
193f085823Sopenharmony_ci    <title>OHOSReport</title>
203f085823Sopenharmony_ci    <!-- import CSS -->
213f085823Sopenharmony_ci    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
223f085823Sopenharmony_ci    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
233f085823Sopenharmony_ci    <!-- import Vue before Element -->
243f085823Sopenharmony_ci    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
253f085823Sopenharmony_ci    <!-- import JavaScript -->
263f085823Sopenharmony_ci    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
273f085823Sopenharmony_ci</head>
283f085823Sopenharmony_ci<body>
293f085823Sopenharmony_ci
303f085823Sopenharmony_ci<div id="report_title" v-bind:class="{ title_s : true}">
313f085823Sopenharmony_ci    <template>
323f085823Sopenharmony_ci        <div>
333f085823Sopenharmony_ci            <h4>{{ title }}</h4>
343f085823Sopenharmony_ci        </div>
353f085823Sopenharmony_ci    </template>
363f085823Sopenharmony_ci</div>
373f085823Sopenharmony_ci
383f085823Sopenharmony_ci<div id="report_summary" v-bind:class="{ subsystem_table_style : true}">
393f085823Sopenharmony_ci    <template>
403f085823Sopenharmony_ci        <el-table
413f085823Sopenharmony_ci            :data="summary_data"
423f085823Sopenharmony_ci            border
433f085823Sopenharmony_ci            size="mini"
443f085823Sopenharmony_ci            :default-sort = "{prop: 'id'}"
453f085823Sopenharmony_ci            row-key="id"
463f085823Sopenharmony_ci            style="width: 100%">
473f085823Sopenharmony_ci            <el-table-column
483f085823Sopenharmony_ci                prop="id"
493f085823Sopenharmony_ci                label="ID"
503f085823Sopenharmony_ci                width="100"
513f085823Sopenharmony_ci                show-overflow-tooltip>
523f085823Sopenharmony_ci            </el-table-column>
533f085823Sopenharmony_ci            <el-table-column
543f085823Sopenharmony_ci                prop="item"
553f085823Sopenharmony_ci                label="Item Name"
563f085823Sopenharmony_ci                show-overflow-tooltip>
573f085823Sopenharmony_ci            </el-table-column>
583f085823Sopenharmony_ci            <el-table-column
593f085823Sopenharmony_ci                prop="content"
603f085823Sopenharmony_ci                label="Value"
613f085823Sopenharmony_ci                show-overflow-tooltip>
623f085823Sopenharmony_ci            </el-table-column>
633f085823Sopenharmony_ci        </el-table>
643f085823Sopenharmony_ci    </template>
653f085823Sopenharmony_ci</div>
663f085823Sopenharmony_ci
673f085823Sopenharmony_ci<div id="measure_title" v-bind:class="{ title_s : true}">
683f085823Sopenharmony_ci    <template>
693f085823Sopenharmony_ci        <div>
703f085823Sopenharmony_ci            <h4>{{ title }}</h4>
713f085823Sopenharmony_ci        </div>
723f085823Sopenharmony_ci    </template>
733f085823Sopenharmony_ci</div>
743f085823Sopenharmony_ci
753f085823Sopenharmony_ci<div id="main" class="box" style="width: 1300px; height:600px;"></div>
763f085823Sopenharmony_ci
773f085823Sopenharmony_ci</body>
783f085823Sopenharmony_ci
793f085823Sopenharmony_ci<!-- report_title -->
803f085823Sopenharmony_ci<script>
813f085823Sopenharmony_ci    new Vue({
823f085823Sopenharmony_ci        el: '#report_title',
833f085823Sopenharmony_ci        data: { title : 'Microbenchmark Details'}
843f085823Sopenharmony_ci    })
853f085823Sopenharmony_ci</script>
863f085823Sopenharmony_ci
873f085823Sopenharmony_ci<script>
883f085823Sopenharmony_ci    new Vue({
893f085823Sopenharmony_ci        el: '#measure_title',
903f085823Sopenharmony_ci        data: { title : ''}
913f085823Sopenharmony_ci    })
923f085823Sopenharmony_ci</script>
933f085823Sopenharmony_ci
943f085823Sopenharmony_ci<script>
953f085823Sopenharmony_ci    new Vue({
963f085823Sopenharmony_ci        el: '#report_summary',
973f085823Sopenharmony_ci        data: {
983f085823Sopenharmony_ci            summary_data: OHOS_REPORT_SUMMARY,
993f085823Sopenharmony_ci        },
1003f085823Sopenharmony_ci        methods: {
1013f085823Sopenharmony_ci            handleChange: function (val)
1023f085823Sopenharmony_ci            {
1033f085823Sopenharmony_ci                console.log(val);
1043f085823Sopenharmony_ci            },
1053f085823Sopenharmony_ci        }
1063f085823Sopenharmony_ci    })
1073f085823Sopenharmony_ci</script>
1083f085823Sopenharmony_ci
1093f085823Sopenharmony_ci<style>
1103f085823Sopenharmony_ci    .title_s {
1113f085823Sopenharmony_ci        max-width: 1300px;
1123f085823Sopenharmony_ci        margin: auto;
1133f085823Sopenharmony_ci        background: white;
1143f085823Sopenharmony_ci        height: 25px;
1153f085823Sopenharmony_ci        color: #003399;
1163f085823Sopenharmony_ci        padding: 10px 8px;
1173f085823Sopenharmony_ci        text-align: center;
1183f085823Sopenharmony_ci    }
1193f085823Sopenharmony_ci    .error_s {
1203f085823Sopenharmony_ci        color: #f00000;
1213f085823Sopenharmony_ci        font-size: 14px;
1223f085823Sopenharmony_ci    }
1233f085823Sopenharmony_ci    .subsystem_table_style {
1243f085823Sopenharmony_ci        max-width: 1300px;
1253f085823Sopenharmony_ci        margin: auto;
1263f085823Sopenharmony_ci        background: white;
1273f085823Sopenharmony_ci        padding: 10px;
1283f085823Sopenharmony_ci    }
1293f085823Sopenharmony_ci    .el-table .warning-row {
1303f085823Sopenharmony_ci        background: oldlace;
1313f085823Sopenharmony_ci    }
1323f085823Sopenharmony_ci    .el-table .failed-cell {
1333f085823Sopenharmony_ci        color: #003399;
1343f085823Sopenharmony_ci    }
1353f085823Sopenharmony_ci    .el-table .success-row {
1363f085823Sopenharmony_ci        background: #f0f9eb;
1373f085823Sopenharmony_ci    }
1383f085823Sopenharmony_ci    .el-table .header-row {
1393f085823Sopenharmony_ci        color: #003399;
1403f085823Sopenharmony_ci    }
1413f085823Sopenharmony_ci   *{
1423f085823Sopenharmony_ci        padding: 0;
1433f085823Sopenharmony_ci        margin: 0;
1443f085823Sopenharmony_ci    }
1453f085823Sopenharmony_ci    .box {
1463f085823Sopenharmony_ci        padding-top: 10px;
1473f085823Sopenharmony_ci        max-width: 1300px;
1483f085823Sopenharmony_ci        margin: auto;
1493f085823Sopenharmony_ci        height: 600px;
1503f085823Sopenharmony_ci    }
1513f085823Sopenharmony_ci</style>
1523f085823Sopenharmony_ci</html>
153