diff --git a/.gitignore b/.gitignore
index 45d064eaea9c39de066256dec13bc753d3c981b7..25c8fdbaba62c31aacfa2307975b06fbfd017485 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,27 +1,2 @@
-.DS_Store
 node_modules
-/dist
-mock
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-*.gitignore
-
-*package-lock.json
+package-lock.json
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
index 98e194154625340b5737b15e6ee6b38822d86666..07a2773a9d04ac695eb7a2cc5c5b80108c5eed4b 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:alpine as Builder
+FROM node:lts-alpine3.14 as Builder
 
 MAINTAINER zhangxiaopan<zhangxiaopan2@huawei.com>
 
@@ -6,10 +6,11 @@ RUN mkdir -p /home/openeuler/crystal-ci-web
 WORKDIR /home/openeuler/crystal-ci-web
 COPY . /home/openeuler/crystal-ci-web
 
-RUN npm install && \
+RUN npm i --legacy-peer-deps --registry=https://mirrors.huaweicloud.com/repository/npm/ && \
+    npm install && \
     npm run build
 
-FROM nginx:1.19.2
+FROM nginx:1.20.0
 
 COPY --from=Builder /home/openeuler/crystal-ci-web/dist /usr/share/nginx/html/
 RUN chmod -R 755 /usr/share/nginx/html
diff --git a/README.en.md b/README.en.md
index 501a9b902529f4b4299ffec59e532d181182860a..30c50ae2862f7b944ffb4ec20ccd69f82bc32cab 100644
--- a/README.en.md
+++ b/README.en.md
@@ -6,11 +6,18 @@ Crystal CI
 #### Software Architecture
 Software architecture description
 
-#### Installation
-
-1.  xxxx
-2.  xxxx
-3.  xxxx
+#### Deploy in local
+
+1. configuration
+  - crystal-ci/src/utils/axios.utils.js: change 'const BASEURL' like
+  ```
+  https://$you_host:$you_web-backend_port; # if you hadn't changed web-bachend port, you can use default port: 20003
+  ```
+  - crystal-ci/src/utils/baseUrl.js: change export const BASEURLRESULT like
+  ```
+  http://$your_host:$your_srv_http_result_port'; #  if you hadn't changed srv-http-result port, you can use default port: 20007
+  ```
+2. run: crystal-ci/build && crystal-ci/start
 
 #### Instructions
 
diff --git a/README.md b/README.md
index a7d16ebb899ac5694028d001e553608c8426c5f4..5497102431096abf76ca75590121ff4e6b4aae19 100644
--- a/README.md
+++ b/README.md
@@ -1,37 +1,9 @@
 # crystal-ci
 
-#### 介绍
-Crystal CI
-
-#### 软件架构
-软件架构说明
-
-
-#### 安装教程
-
-1.  xxxx
-2.  xxxx
-3.  xxxx
-
 #### 使用说明
 
-1.  xxxx
-2.  xxxx
-3.  xxxx
-
-#### 参与贡献
-
-1.  Fork 本仓库
-2.  新建 Feat_xxx 分支
-3.  提交代码
-4.  新建 Pull Request
-
-
-#### 码云特技
+1.  安装node.js(自带npm)
+2.  cd crystal-ci
+3.  npm install
+4.  npm run serve
 
-1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
-2.  码云官方博客 [blog.gitee.com](https://blog.gitee.com)
-3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目
-4.  [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
-5.  码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
-6.  码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
diff --git a/build b/build
new file mode 100755
index 0000000000000000000000000000000000000000..15d64046120446fc39108d36cc607c5c92d43d1c
--- /dev/null
+++ b/build
@@ -0,0 +1,8 @@
+#!/bin/bash
+# SPDX-License-Identifier: MulanPSL-2.0+
+# Copyright (c) 2020 Huawei Technologies Co., Ltd. All rights reserved.
+
+yum -y install nodejs
+npm install
+npm run build
+docker build -t web .
diff --git a/deploy/nginx/nginx.conf b/deploy/nginx/nginx.conf
index 1c23ea1ca8ad2060ea5f04ca120f121251a2587e..4ef0115d8959153bed23089cb73e9921fdd2e33d 100644
--- a/deploy/nginx/nginx.conf
+++ b/deploy/nginx/nginx.conf
@@ -53,7 +53,7 @@ http {
   add_header Cache-Control no-store;
   add_header Pragma no-cache;
   add_header X-Frame-Options "SAMEORIGIN";
-  add_header Content-Security-Policy "script-src 'self' 'unsafe-eval';object-src 'none';frame-ancestors 'self'";
+  add_header Content-Security-Policy "script-src 'self' 'unsafe-eval' *.baidu.com ers.baidu.com www.googletagmanager.com 'unsafe-inline';object-src 'none';frame-ancestors 'self'";
 
 
   proxy_hide_header X-Powered-By;
diff --git a/package.json b/package.json
index c5450726e45fdab204c8d67a9786c7dee091e801..a679e9130b79981db2c77679a42a3c5c7960ff91 100644
--- a/package.json
+++ b/package.json
@@ -5,16 +5,22 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "test": "vue-cli-service build --mode test"
   },
   "dependencies": {
     "axios": "^0.20.0",
     "core-js": "^3.6.5",
+    "echarts": "^4.9.0",
     "element-ui": "^2.13.2",
+    "file-saver": "^2.0.5",
+    "less-loader": "^7.0.1",
     "vue": "^2.6.11",
     "vue-axios": "^2.1.5",
-    "less-loader": "^7.0.1",
-    "vue-router": "^3.2.0"
+    "vue-echarts": "^6.0.0-rc.6",
+    "vue-router": "^3.2.0",
+    "xlsx": "^0.17.4",
+    "xlsx-style": "^0.8.13"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -22,10 +28,11 @@
     "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "babel-eslint": "^10.1.0",
+    "babel-plugin-component": "^1.1.1",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "node-sass": "^4.14.1",
-    "sass-loader": "^10.0.2",
+    "less": "^3.0.4",
+    "less-loader": "^5.0.0",
     "vue-template-compiler": "^2.6.11"
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index df36fcfb72584e00488330b560ebcf34a41c64c2..0000000000000000000000000000000000000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/img/footer.png b/public/img/footer.png
index 99ac288ee1f8f4b3018ead2325899bdc3f7aac65..920add58c7d501493210ad9abaf512726dfd19d4 100644
Binary files a/public/img/footer.png and b/public/img/footer.png differ
diff --git a/public/img/header.png b/public/img/header.png
index 11298e5636d3413cbdff4adc3bef9cd8ec4900aa..eaf1e05692099fe12da5038d4beb214160fc6885 100644
Binary files a/public/img/header.png and b/public/img/header.png differ
diff --git a/public/img/home_header.png b/public/img/home_header.png
index 2d0b26866cd42c510a8f195830412d414af710c6..dd4721c1240932aa2c722398b1bed0e48bce2808 100644
Binary files a/public/img/home_header.png and b/public/img/home_header.png differ
diff --git a/public/index.html b/public/index.html
index 06b08901d7931511bf956fdc0f0f64599599ea6f..2148b6b28e41aae32e6e22b98dca1cfb8a305aff 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,10 +3,13 @@
 
 <head>
     <meta charset="utf-8">
-    <title>Crystal CI</title>
+    <title>Compass CI</title>
+    <!-- 引入百度统计和谷歌统计 -->
+    <script src="https://hm.baidu.com/hm.js?ab8d86daab9a8e98cf8faa239aefcd3c"></script>
+    <script src="https://www.googletagmanager.com/gtag/js?id=UA-181761489-1"></script>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="data:image/ico;base64,aWNv">
 </head>
 
 <body>
diff --git a/public/style/base.css b/public/style/base.css
index 4f5e4a9700de997779b8d8499df6884348bed287..396b47ca094035a43e153fc730800da9edc79268 100644
--- a/public/style/base.css
+++ b/public/style/base.css
@@ -1,5 +1,8 @@
 /* CSS Document */
+
+
 /*css reset*/
+
 html {
     box-sizing: border-box;
 }
@@ -47,6 +50,21 @@ img {
     border: 0;
 }
 
+pre {
+    font-family: Consolas;
+    font-size: 14px;
+    white-space: pre-wrap;
+    /* css-3 */
+    white-space: -moz-pre-wrap;
+    /* Mozilla, since 1999 */
+    white-space: -pre-wrap;
+    /* Opera 4-6 */
+    white-space: -o-pre-wrap;
+    /* Opera 7 */
+    word-wrap: break-word;
+    /* Internet Explorer 5.5+ */
+}
+
 address,
 caption,
 cite,
@@ -90,7 +108,9 @@ acronym {
     border: 0;
 }
 
+
 /*定位*/
+
 .tl {
     text-align: left;
 }
diff --git a/public/style/public.css b/public/style/public.css
index fdd39d742ce633fdca2a2ae7be36b61c6a8c25ed..efd30985ee2d6b8787852d74f38ebc8b9fc02cb7 100644
--- a/public/style/public.css
+++ b/public/style/public.css
@@ -5,7 +5,7 @@
 
 .title {
     font-size: 36px;
-    margin: 150px 0 20px;
+    margin: 50px 0 20px;
 }
 
 .summary {
@@ -29,8 +29,31 @@
     margin-top: 30px;
     width: 100%;
 }
+
 .wrap {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+}
+
+.ci-logo {
+    margin-left: 10%;
+    margin-top: 25px;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 2px solid #fff;
+    background-color: rgba(0, 0, 0, 0);
+    color: #fff;
+    font-size: 20px;
+    font-weight: bold;
+    text-align: center;
+    line-height: 36px;
+    cursor: pointer;
+}
+
+.nav-div {
+    float: right;
+    margin-right: 10%;
+    border-bottom: none;
 }
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index cca9ca0c8ddb9cdb977fa6cb11f5579a92f02b70..cb5b5ff695e7c021e1144cf88f10658aeeabe745 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,24 +1,41 @@
 <template>
   <div id="app">
-    <Header class="main-header"></Header>
     <router-view class="container" />
     <Footer class="main-footer"></Footer>
   </div>
 </template>
 
 <script>
-import Header from "@/components/Header";
 import Footer from "@/components/Footer";
 export default {
+  data() {
+    return {
+      
+    }
+  },
   components: {
-    Header,
     Footer,
   },
-  mounted() {},
+  methods: {
+    notice() {
+      this.$notify({
+        title: "通知",
+        message: "机房于2020年11月28日20:00至2020年11月29日20:00维护，将不能正常访问数据，给您带来的不便，敬请谅解！",
+        duration: 0,
+        showClose: false,
+      });
+    },
+  },
+  mounted() {
+    
+  },
+  updated() {
+    window.scroll(0, 0);
+  },
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 #app {
   height: 100%;
   position: relative;
@@ -27,7 +44,7 @@ export default {
   padding-bottom: 62px;
   min-height: calc(100vh - 152px);
   @media screen and (max-width: 1000px) {
-      padding-bottom:100px;
+    padding-bottom: 100px;
   }
 }
 </style>
diff --git a/src/api/jobs.js b/src/api/jobs.js
index 7f3f59ed643473649dcb7391a259c152f9bda7ff..c3c5815147978283659bf6e82669ee92d5267071 100644
--- a/src/api/jobs.js
+++ b/src/api/jobs.js
@@ -1,11 +1,62 @@
 /**
  * @file jobs接口文档入口
  * */
-import {service} from '../utils/axios.utils';
+import { service } from '../utils/axios.utils';
 export function getJobs(data) {
     return service({
         url: '/get_jobs',
         method: 'get',
         params: data
     });
-}
\ No newline at end of file
+}
+
+export function getSrpms(data) {
+    return service({
+        url: '/srpm_info',
+        method: 'get',
+        params: data
+    });
+}
+
+export function getJobsSummary(data) {
+    return service({
+        url: '/get_jobs_summary',
+        method: 'get',
+        params: data
+    });
+}
+
+export function getErrorList(data) {
+    return service({
+        url: '/get_job_error',
+        method: 'get',
+        params: data
+    });
+}
+export function getPerformanceResult(data) {
+    return service({
+        url: '/performance_result',
+        method: 'post',
+        data: data,
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        }
+    });
+}
+export function QueryField(data) {
+    return service({
+        url: '/query_field',
+        method: 'post',
+        data: data,
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        }
+    });
+}
+export function getHostInfo(data) {
+    return service({
+        url: '/host_info',
+        method: 'get',
+        params: data
+    });
+}
diff --git a/src/api/testMatrix.js b/src/api/testMatrix.js
new file mode 100644
index 0000000000000000000000000000000000000000..086d389572b401a9f6530905d49a1690186668d4
--- /dev/null
+++ b/src/api/testMatrix.js
@@ -0,0 +1,11 @@
+/**
+ * @file testMatrix接口文档入口
+ * */
+import { service } from '../utils/axios.utils';
+export function testMatrix(data) {
+    return service({
+        url: '/test_matrix',
+        method: 'get',
+        params: data
+    });
+}
diff --git a/src/assets/fail.png b/src/assets/fail.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a8a251ef9962df4be46500a8c39a47f5c223719
Binary files /dev/null and b/src/assets/fail.png differ
diff --git a/src/assets/null.png b/src/assets/null.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe5d9b73f86e46fff317e02456220ea85f3c2e45
Binary files /dev/null and b/src/assets/null.png differ
diff --git a/src/assets/success.png b/src/assets/success.png
new file mode 100644
index 0000000000000000000000000000000000000000..c074d2c12f396a3d07020887dc173b7cb766b597
Binary files /dev/null and b/src/assets/success.png differ
diff --git a/src/components/Footer/index.vue b/src/components/Footer/index.vue
index efbe6266548841327cee4f96d284cbe245d572b6..5b43701077f9505e68236110a0930ca3850d315b 100644
--- a/src/components/Footer/index.vue
+++ b/src/components/Footer/index.vue
@@ -1,130 +1,154 @@
 <template>
-    <footer id="footer">
-        <div class="footer-content">
-             <div class="content-left">
-                <p class="left-title">{{footTitleObj.FOOOTER?footTitleObj.FOOOTER.LEFTTITLE:''}}</p>
-                <p class="left-content">{{footTitleObj.FOOOTER?footTitleObj.FOOOTER.LEFTCONTENT:''}}</p>
-            </div>
-            <div class="content-right">
-                <p class="right-word">
-                    <span>{{footTitleObj.FOOOTER?footTitleObj.FOOOTER.WORDLEFT:''}}</span>
-                    <span>{{footTitleObj.FOOOTER?footTitleObj.FOOOTER.WORDRIGHT:''}}</span>
-                </p>
-                <div class="footer-line"></div>
-            </div>
-        </div>
-    </footer>
+  <footer id="footer">
+    <div class="footer-content">
+      <div class="content-left">
+        <p
+          class="left-title"
+          @click="JoinUs"
+        >{{footTitleObj.FOOOTER?footTitleObj.FOOOTER.LEFTTITLE:''}}</p>
+        <p class="left-content">{{footTitleObj.FOOOTER?footTitleObj.FOOOTER.LEFTCONTENT:''}}</p>
+      </div>
+      <div class="content-right">
+        <p class="right-word">
+          <span @click="goPrivacyPolicy">{{footTitleObj.FOOOTER?footTitleObj.FOOOTER.WORDLEFT:''}}</span>
+          <span @click="goLegalNotices">{{footTitleObj.FOOOTER?footTitleObj.FOOOTER.WORDRIGHT:''}}</span>
+          <span @click="goDisclamer">{{footTitleObj.FOOOTER?footTitleObj.FOOOTER.DISCLAIMER:''}}</span>
+        </p>
+        <div class="footer-line">{{footTitleObj.FOOOTER?footTitleObj.FOOOTER.COPYRIGHT:''}}</div>
+      </div>
+    </div>
+  </footer>
 </template>
 
 <script>
 export default {
-  data () {
+  data() {
     return {
-      footTitleObj: {}
+      footTitleObj: {},
+    };
+  },
+  methods: {
+    goLegalNotices() {
+      window.open("https://openeuler.org/zh/other/legal/", "_blank");
+    },
+    goPrivacyPolicy() {
+      window.open("https://openeuler.org/zh/other/privacy/", "_blank");
+    },
+    JoinUs() {
+      window.open("https://gitee.com/openeuler/compass-ci", "_blank");
+    },
+    goDisclamer() {
+       this.$router.push("/disclaimer");
     }
   },
-  mounted () {
-    this.footTitleObj = require('@/lang/common.js')
-  }
-}
-
+  mounted() {
+    this.footTitleObj = require("@/lang/common.js");
+  },
+};
 </script>
 
-<style lang='scss' scoped>
-#footer{
-    position: relative;
+<style lang="less" scoped>
+#footer {
+  position: relative;
+  width: 100%;
+  height: 152px;
+  padding: 0 10%;
+  background-image: url("./../../../public/img/footer.png");
+  background-size: cover;
+  display: block;
+  .footer-content {
+    display: flex;
+    justify-content: space-between;
     width: 100%;
-    height: 152px;
-    background-image: url('./../../../public/img/footer.png');
-    background-size: cover;
-    display: block;
-    .footer-content{
-        display: flex;
-        width: 1120px;
-        position: absolute;
-        height: 80px;
-        left: 50%;
-        top: 50%;
-        margin: -40px 0 0 -560px;
-        .content-left{
-            .left-title{
-                font-size: 40px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #FFFFFF;
-                line-height: 56px;
-                width: 272px;
-            }
-            .left-content{
-                font-size: 14px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #FFFFFF;
-                line-height: 24px;
-            }
+    height: 100%;
+    .content-left {
+      align-self: center;
+      .left-title {
+        font-size: 40px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 56px;
+        cursor: pointer;
+      }
+      .left-content {
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 24px;
+      }
+    }
+    .content-right {
+      width: 342px;
+      margin-top: 24px;
+      text-align: center;
+      align-self: center;
+      .right-word {
+        width: 342px;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 24px;
+        cursor: pointer;
+        span {
+          display: inline-block;
+          padding: 0 15px;
+          &:nth-of-type(2){
+            border-left: 1px solid #ffffff;
+          }
+          &:last-of-type{
+            border-left: 1px solid #ffffff;
+          }
         }
-        .content-right{
-            width: 342px;
-            margin-left: 400px;
-            margin-top: 24px;
-            .right-word{
-                font-size: 11px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #FFFFFF;
-                line-height: 24px;
-                span{
-                    display: inline-block;
-                    &:last-of-type{
-                        font-size: 12px;
-                        margin-left: 135px;
-                    }
-                }
-            }
-            .footer-line{
-                width: 342px;
-                height: 1px;
-                background: #FFFFFF;
-                opacity: 0.5;
-                margin-top: 8px;
+      }
+      .footer-line {
+        width: 342px;
+        color: #ffffff;
+        opacity: 0.5;
+        margin-top: 8px;
+        font-size: 12px;
+      }
+    }
+  }
+  @media screen and (max-width: 1000px) {
+    height: 280px;
+    .footer-content {
+      width: 100%;
+      flex-direction: column;
+      margin: 0;
+      left: 0;
+      top: 20px;
+      text-align: center;
+      .content-left {
+        .left-title {
+          font-size: 25px;
+        }
+        .left-content {
+          font-size: 13px;
+        }
+      }
+      .content-right {
+        width: 100%;
+        margin: 20px 0 0 0;
+        .right-word {
+          font-size: 13px;
+          text-align: center;
+          width: 100%;
+          span {
+            &:last-of-type {
+              margin-left: 0;
             }
+          }
         }
-    }
-    @media screen and (max-width: 1000px) {
-        height: 280px;
-        .footer-content{
-            width: 100%;
-            flex-direction: column;
-            margin: 0;
-            left: 0;
-            top: 20px;
-            text-align: center;
-             .content-left{
-                 .left-title{
-                     font-size: 25px;
-                 }
-                 .left-content{
-                     font-size: 13px;
-                 }
-             }
-             .content-right{
-                margin: 20px 0 0 0;
-                .right-word{
-                    font-size: 13px;
-                    span{
-                        &:last-of-type{
-                            display: block;
-                            margin-left: 0;
-                        }
-                    }
-                }
-                .footer-line{
-                    width: 100%;
-                    height: 2px;
-                    margin: 15px auto 0 auto;
-                }
-             }
+        .footer-line {
+          width: 100%;
+          height: 2px;
+          margin: 15px auto 0 auto;
         }
+      }
     }
+  }
 }
 </style>
diff --git a/src/components/Header/index.vue b/src/components/Header/index.vue
index 9efc6e0be2c0f349b37b07ca11d4a7b5d2229524..61ea3f363503baacb6bf8cbdc16887ab317012ac 100644
--- a/src/components/Header/index.vue
+++ b/src/components/Header/index.vue
@@ -1,7 +1,8 @@
 <template>
   <header id="header">
-    <div @click="goHome">
-      <p class="small-title">{{headTitleObj.HEAD?headTitleObj.HEAD.SMALLTITLE:''}}</p>
+    <div @click="goHome" class="header-title">
+        <div class="ci-logo">CI</div>
+      <span class="small-title">{{headTitleObj.HEAD?headTitleObj.HEAD.SMALLTITLE:''}}</span>
     </div>
   </header>
 </template>
@@ -24,8 +25,8 @@ export default {
 };
 </script>
 
-<style lang='scss' scpoed>
-#header {
+<style lang="less" scpoed>
+.header-title {
   background-image: url("./../../../public/img/header.png");
   width: 100%;
   height: 90px;
@@ -33,14 +34,15 @@ export default {
   background-repeat: no-repeat;
   position: relative;
   overflow: hidden;
+  display: flex;
   .small-title {
     font-size: 20px;
-    width: 30%;
+    width: 40%;
     font-family: PingFangSC-Regular, PingFang SC;
     font-weight: 400;
     color: #ffffff;
     line-height: 28px;
-    margin: 31px 0 0 10%;
+    margin: 31px 0 0 40px;
     cursor: pointer;
   }
 }
diff --git a/src/components/LinkCard/index.vue b/src/components/LinkCard/index.vue
index 053791dab98e95ca95fd4ac9cbac895f200f0273..5947f846904692190ca29fb507a0cf6a413d1664 100644
--- a/src/components/LinkCard/index.vue
+++ b/src/components/LinkCard/index.vue
@@ -23,13 +23,14 @@ export default {
     goPath() {
       if (this.insideName.name == "Jobs") {
         this.$router.push("/jobs");
-      } else if (this.insideName.name == "Compare results") {
-        this.$router.push("/compare");
       } else if (this.insideName.name == "Testboxes") {
         window.location.href =
           "https://gitee.com/wu_fengguang/lab-z9/tree/master/hosts/";
       } else if (this.insideName.name == "Git repo") {
         this.$router.push("/repos");
+      } else if (this.insideName.name == "Compare results") {
+        this.$router.push("/compare");
+        //  return false
       }
     },
   },
@@ -37,35 +38,39 @@ export default {
 };
 </script>
 
-<style lang='scss' scoped>
+<style lang="less" scoped>
 .link-card {
   position: relative;
   margin: 30px;
   @media screen and (max-width: 1000px) {
-      margin-right: 0;
+    margin-right: 0;
+    display: flex;
+    direction: row;
+    flex-wrap: nowrap;
   }
   .back-card {
-    width: 304px;
+    // width: 304px;
+    width: 359px;
     @media screen and (max-width: 1000px) {
       width: 280px;
     }
     height: 200px;
     background: #ffffff;
-    box-shadow: 0px 10px 30px 0px rgba(2, 108, 255, .25);
+    box-shadow: 0px 10px 30px 0px rgba(2, 108, 255, 0.15);
     border-radius: 20px;
     padding: 20px 30px;
     text-align: left;
+    cursor: pointer;
   }
   .link-car {
-    cursor: pointer;
     width: 252px;
     @media screen and (max-width: 1000px) {
-       width: 240px;
+      width: 240px;
     }
     height: 76px;
     background: #1057ca;
-    box-shadow: 0px 10px 30px 0px rgba(2, 108, 255, .25),
-      0px -10px 20px 0px rgba(2, 108, 255, .25);
+    box-shadow: 0px 10px 30px 0px rgba(2, 108, 255, 0.15),
+      0px -10px 20px 0px rgba(2, 108, 255, 0.15);
     border-radius: 10px 20px 10px 20px;
     position: absolute;
     bottom: -10px;
@@ -75,8 +80,29 @@ export default {
     font-weight: 400;
     color: #ffffff;
     line-height: 36px;
-    text-shadow: 0px 10px 30px rgba(2, 108, 255, .25);
+    text-shadow: 0px 10px 30px rgba(2, 108, 255, 0.15);
     padding: 20px 0 20px 20px;
   }
 }
+.disableCom {
+    color: #9b9b9b;
+    width: 252px;
+    @media screen and (max-width: 1000px) {
+      width: 240px;
+    }
+    height: 76px;
+    background: #1057ca;
+    box-shadow: 0px 10px 30px 0px rgba(2, 108, 255, 0.15),
+      0px -10px 20px 0px rgba(2, 108, 255, 0.15);
+    border-radius: 10px 20px 10px 20px;
+    position: absolute;
+    bottom: -10px;
+    left: -10px;
+    font-size: 25px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    line-height: 36px;
+    text-shadow: 0px 10px 30px rgba(2, 108, 255, 0.15);
+    padding: 20px 0 20px 20px;
+  }
 </style>
diff --git a/src/components/error/error.vue b/src/components/error/error.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dd3cf7df0c50f67121f9297f91d7178e30357fd5
--- /dev/null
+++ b/src/components/error/error.vue
@@ -0,0 +1,26 @@
+<template>
+    <div class="reeor">
+       <Header class="main-header"></Header> 
+       <div class="content">
+           <p class="tips">
+               未完待续，敬请期待......
+           </p>
+       </div>
+    </div>
+</template>
+<script>
+import Header from "@/components/Header";
+export default {
+  name: 'Error',
+  components: {
+    Header,
+  },
+}
+</script>
+<style lang="less" scope>
+   .tips {
+       font-size: 30px;
+       font-weight: bold;
+       margin-top: 5%;
+   } 
+</style>
\ No newline at end of file
diff --git a/src/components/homeHeader/index.vue b/src/components/homeHeader/index.vue
index 302b700c1fb1db5a103d129ede7309a821684466..70708c8fbf1730585d1fcfe050c07921f605565c 100644
--- a/src/components/homeHeader/index.vue
+++ b/src/components/homeHeader/index.vue
@@ -1,5 +1,20 @@
 <template>
   <header class="home-header">
+    <!-- <p class="small-title">{{headTitleObj.HEAD?headTitleObj.HEAD.SMALLTITLE:''}}</p> -->
+    <div class="ci-logo">CI</div>
+    <div class="nav-div">
+      <el-menu
+        default-active="/job-summary"
+        mode="horizontal"
+        background-color="unset"
+        text-color="#fff"
+        active-text-color="#ffd04b"
+        @select="handleSelect"
+      >
+        <el-menu-item index="/job-summary">测试汇总</el-menu-item>
+        <el-menu-item index="/performance-result">性能图表</el-menu-item>
+      </el-menu>
+    </div>
     <div class="center-title">
       <p class="tile">{{headTitleObj.HEAD?headTitleObj.HEAD.CENTERTITLE:''}}</p>
       <p class="home-content">{{headTitleObj.HEAD?headTitleObj.HEAD.CENTERCONTENT:''}}</p>
@@ -11,31 +26,37 @@
 export default {
   data() {
     return {
-      headTitleObj: {},
+      headTitleObj: {}
     };
   },
+  methods: {
+    handleSelect(path) {
+      window.open(path);
+    }
+  },
   mounted() {
     this.headTitleObj = require("@/lang/common.js");
-  },
+  }
 };
 </script>
 
-<style lang='scss' scpoed>
+<style lang="less" scpoed>
 .home-header {
   background-image: url("./../../../public/img/home_header.png");
   width: 100%;
   height: 478px;
   position: relative;
-  margin-top: -90px;
-  background-size: auto 100%;
+  background-size: 100% 100%;
   background-repeat: no-repeat;
   overflow: hidden;
-  z-index: -999;
+  @media screen and (max-width: 1000px) {
+    background-size: auto 100%;
+  }
   .center-title {
-    margin: 150px 0 0 25%;
+    margin: 85px 0 0 10%;
     text-align: left;
     @media screen and (max-width: 1000px) {
-      margin: 82px 10%;
+      margin: 10px 10%;
     }
     .tile {
       font-size: 40px;
@@ -45,8 +66,16 @@ export default {
       line-height: 56px;
     }
     .home-content {
-      margin-top: 14px;
+      margin: 14px 0;
       font-size: 16px;
+      width: 1150px;
+      @media screen and (min-width: 1920px) {
+        width: 70%;
+      }
+      @media screen and (max-width: 1000px) {
+        width: 100%;
+        margin: 0;
+      }
       font-family: FZLTXIHJW--GB1-0, FZLTXIHJW--GB1;
       font-weight: 400;
       color: #ffffff;
@@ -54,4 +83,14 @@ export default {
     }
   }
 }
+.small-title {
+  font-size: 20px;
+  width: 40%;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 28px;
+  margin: 31px 0 0 10%;
+  cursor: pointer;
+}
 </style>
diff --git a/src/lang/common.js b/src/lang/common.js
index 3c0273d30fc122fa594a348fd3406ed3cb1286a7..a17457821b8f4fded168823bf1590259bb64f3b4 100644
--- a/src/lang/common.js
+++ b/src/lang/common.js
@@ -3,14 +3,16 @@
  * */
 module.exports = {
     HEAD: {
-        SMALLTITLE: 'Crystal CI',
-        CENTERTITLE: 'Crystal CI',
-        CENTERCONTENT: '作为一个开放式测试服务，集成构建&测试系统，软件调测、测试分析比较能力，旨在与社区开发者一起提升开源软件质量。'
+        SMALLTITLE: 'Compass CI',
+        CENTERTITLE: 'Compass CI',
+        CENTERCONTENT: '开放式测试服务平台，集构建&测试系统、登录调测、测试分析比较、辅助定位于一体，旨在给社区开发者提供友好的开发体验，与社区开发者一起繁荣开源软件生态及提升开源软件质量。'
     },
     FOOOTER: {
-        LEFTTITLE: 'Join Crystal CI',
+        LEFTTITLE: 'Join Compass CI',
         LEFTCONTENT: '让社区开发更简单',
-        WORDLEFT: 'Enter your email address..',
-        WORDRIGHT: 'Subscribe'
+        WORDLEFT: '隐私政策',
+        WORDRIGHT: '法律声明',
+        DISCLAIMER: '免责声明',
+        COPYRIGHT: '版权所有 © 2020 openEuler 保留一切权利'
     }
 };
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index ef18dbde2a217ec887604cc0963bfc294503819c..c2bb9985e899a8336ce8ce9c5cd6e8762d03d4c5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,16 +4,60 @@
 import Vue from 'vue';
 import App from './App.vue';
 import router from './router';
-import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
+import {
+    Table,
+    TableColumn,
+    Pagination,
+    Form,
+    FormItem,
+    Select,
+    Option,
+    Input,
+    Cascader,
+    Button,
+    Tooltip,
+    Notification,
+    Message,
+    Menu,
+    Submenu,
+    MenuItem,
+    Checkbox,
+    CheckboxGroup,
+    Radio,
+    RadioGroup,
+    Transfer,
+    Dialog
+} from 'element-ui';
 import axios from 'axios';
 import VueAxios from 'vue-axios';
 import '../public/style/public.css';
 import './../public/style/base.css';
+import './../public/style/theme/index.css';
 
 Vue.use(VueAxios, axios);
 Vue.config.productionTip = false;
-Vue.use(ElementUI);
+Vue.use(Table);
+Vue.use(TableColumn);
+Vue.use(Pagination);
+Vue.use(Form);
+Vue.use(FormItem);
+Vue.use(Select);
+Vue.use(Option);
+Vue.use(Input);
+Vue.use(Cascader);
+Vue.use(Button);
+Vue.use(Tooltip);
+Vue.use(Menu);
+Vue.use(Submenu);
+Vue.use(MenuItem);
+Vue.use(Checkbox);
+Vue.use(CheckboxGroup);
+Vue.use(Radio);
+Vue.use(RadioGroup);
+Vue.use(Transfer);
+Vue.use(Dialog);
+Vue.prototype.$notify = Notification;
+Vue.prototype.$message = Message;
 
 new Vue({
     router,
diff --git a/src/router/index.js b/src/router/index.js
index af1f31f0e992e57f382faaad758b527c0ef70755..77b0b2789fa6944d3db06eb3836568773b81114e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,7 +11,17 @@ VueRouter.prototype.push = function push(location) {
 }
 Vue.use(VueRouter)
 
-const routes = [{
+const routes = [
+    {
+        path: '/testMatrix',
+        name: 'test',
+        component: () => import('../views/testMatrix/testMatrix.vue')
+    },
+    {
+        path: '*',
+        name: 'Error',
+        component: () => import('../components/error/error.vue')
+    },{
         path: '/',
         name: 'Home',
         component: () => import('../views/home/home.vue')
@@ -21,6 +31,11 @@ const routes = [{
         name: 'Jobs',
         component: () => import('../views/jobs/jobs.vue')
     },
+    {
+        path: '/oepkgs',
+        name: 'Oepkgs',
+        component: () => import('../views/oepkgs/oepkgs.vue')
+    },
     {
         path: '/tree',
         name: 'Tree',
@@ -35,7 +50,39 @@ const routes = [{
         path: '/repos',
         name: 'Repos',
         component: () => import('../views/repos/repos.vue')
+    },
+    {
+        path: '/disclaimer',
+        name: 'Disclaimer',
+        component: () => import('../views/disclaimer/disclaimer.vue')
+    },
+    {
+        path: '/job-summary',
+        name: 'JobSummary',
+        component: () => import('../views/jobSummer/jobSummer.vue')
+    },
+    {
+        path: '/error-list',
+        name: 'ErrorList',
+        component: () => import('../views/errorlist/errorlist.vue')
+    },
+    {
+        path: '/performance-result',
+        name: 'PerformanceResult',
+        component: () => import('../views/performanceresult/performanceresult.vue')
+    },
+    {
+        path: '/performance-list',
+        name: 'PerformanceList',
+        component: () => import('../views/performanceresult/performancelist.vue')
+    },
+    {
+        path: '/performance-update',
+        name: 'PerformanceUpdate',
+        component: () => import('../views/performanceresult/performanceupdate.vue')
     }
+
+
 ]
 
 const router = new VueRouter({
diff --git a/src/utils/axios.utils.js b/src/utils/axios.utils.js
index 70fae24d78a3da52c2c19c9387acf23ff962ce86..cf042224f6ef79b8c93f4ee007fb4f3e5d0322a1 100644
--- a/src/utils/axios.utils.js
+++ b/src/utils/axios.utils.js
@@ -3,7 +3,7 @@
  * */
 import axios from 'axios';
 import {Message, Loading} from 'element-ui';
-const BASEURL = 'http://124.90.34.227:11320';
+const BASEURL = 'https://api.compass-ci.openeuler.org/web_backend';
 let loadingInstance = null;
 export const service = axios.create({
     timeout: 20 * 1000,
@@ -31,4 +31,4 @@ service.interceptors.response.use(response => {
     });
     loadingInstance.close();
     return Promise.reject(error);
-});
\ No newline at end of file
+});
diff --git a/src/utils/baseUrl.js b/src/utils/baseUrl.js
index ba08c59c5f8a42d382ea7b0c2cd30a7224c655a3..0d4771fc09eb0f721d26fc2859397ec6ba7abb4c 100644
--- a/src/utils/baseUrl.js
+++ b/src/utils/baseUrl.js
@@ -1,5 +1,5 @@
 /**
  * @file 常用文件路径
  * */
-export const BASEURLRESULT = 'http://124.90.34.227:11300/result/';
-export const BASEURLTESTBOX = 'https://gitee.com/wu_fengguang/lab-z9/tree/master/hosts/';
\ No newline at end of file
+export const BASEURLRESULT = 'https://api.compass-ci.openeuler.org';
+export const BASEURLTESTBOX = 'https://gitee.com/wu_fengguang/lab-z9/tree/master/hosts/';
diff --git a/src/views/compare/compare.vue b/src/views/compare/compare.vue
index a48f543b5940b575d040a6f842809af9298ac1eb..299dacd7df0807068f7221e3d3173345f12b1d59 100644
--- a/src/views/compare/compare.vue
+++ b/src/views/compare/compare.vue
@@ -1,8 +1,9 @@
 <template>
   <div id="compare">
+    <Header class="main-header"></Header>
     <div class="content">
       <h1 class="title">Compare</h1>
-      <p class="summary">summary</p>
+      <p class="summary">让测试分析过程更简单，更高效</p>
       <div class="filters">filters</div>
       <el-form
         :inline="true"
@@ -11,33 +12,63 @@
         :rules="rules"
         class="demo-form-inline"
       >
-        <el-form-item label="suite" prop="suite" label-width="85px" class="com-tips">
-          <el-select v-model="compareData.suite" filterable placeholder="请选择" size="medium">
+        <el-form-item label="suite" prop="suite" label-width="100px" class="com-tips">
+          <el-select
+            v-model="compareData.suite"
+            filterable
+            placeholder="请选择"
+            size="medium"
+            clearable
+            @clear="clearCheck('suite')"
+          >
             <el-option v-for="item in suiteData" :key="item" :label="item" :value="item"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="OS" prop="OS"  label-width="85px">
-          <el-select v-model="compareData.osStr" filterable placeholder="请选择" size="medium">
-            <el-option v-for="item in OSData" :key="item" :label="item" :value="item"></el-option>
-          </el-select>
+        <el-form-item label="OS" prop="OS" label-width="100px">
+          <el-cascader
+            v-model="handlerValue"
+            ref="refHandle"
+            @change="changeOs"
+            :options="OSData"
+            :props="{ checkStrictly: true }"
+            size="medium"
+            clearable
+            @clear="clearCheck('os')"
+          ></el-cascader>
         </el-form-item>
-        <el-form-item label="os_arch" prop="os_arch" label-width="85px">
-          <el-select v-model="compareData.os_arch" filterable placeholder="请选择" size="medium">
+        <el-form-item label="os_arch" prop="os_arch" label-width="100px">
+          <el-select
+            v-model="compareData.os_arch"
+            filterable
+            placeholder="请选择"
+            size="medium"
+            clearable
+            @clear="clearCheck('os_arch')"
+          >
             <el-option v-for="item in osArchData" :key="item" :label="item" :value="item"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="tbox_group" prop="tbox_group" label-width="85px">
-          <el-select v-model="compareData.tbox_group" filterable placeholder="请选择" size="medium">
+        <el-form-item label="tbox_group" prop="tbox_group" label-width="120px">
+          <el-select
+            v-model="compareData.tbox_group"
+            filterable
+            placeholder="请选择"
+            size="medium"
+            clearable
+            @clear="clearCheck('tbox_group')"
+          >
             <el-option v-for="item in tboxGroupdata" :key="item" :label="item" :value="item"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="dimension" prop="dimension" label-width="85px">
+        <el-form-item label="dimension" prop="dimension" label-width="100px">
           <el-select
             v-model="compareData.dimension"
             filterable
             placeholder="请选择"
             size="medium"
             @change="isDimesion"
+            clearable
+            @clear="changeFlag"
           >
             <el-option v-for="item in dimensionData" :key="item" :label="item" :value="item"></el-option>
           </el-select>
@@ -49,86 +80,180 @@
   </div>
 </template> 
 <script>
-import {compareCandidates, compare} from "../../api/compare";
+import { compareCandidates, compare } from "../../api/compare";
+import Header from "@/components/Header";
 export default {
   name: "Compare",
-  components: {},
+  components: {
+    Header
+  },
+  watch: {
+    handlerValue() {
+      if (this.$refs.refHandle) {
+        this.$refs.refHandle.dropDownVisible = false; //监听值发生变化就关闭它
+      }
+    }
+  },
   data() {
     return {
+      handlerValue: null,
       flag: true,
       listquery: {
         os: "",
         suite: "",
-        dimension: "",
+        dimension: ""
       },
       compareData: {
         suite: null,
         osStr: null,
+        os: null,
+        os_version: null,
         os_arch: null,
         tbox_group: null,
-        dimension: null,
+        dimension: null
       },
       rules: {
-        suite: {
-          required: true,
-          message: "请选择suite",
-          trigger: "change",
-        },
         dimension: {
           required: true,
           message: "请选择dimension",
-          trigger: "change",
-        },
+          trigger: "change"
+        }
       },
       suiteData: [],
       OSData: [],
       osArchData: [],
       tboxGroupdata: [],
-      resData: "",
+      dimensionData: [],
+      resData: ""
     };
   },
   methods: {
+    clearCheck(str) {
+      if (str == "os") {
+        this.compareData.os = null;
+        this.os_version = null;
+      } else {
+        this.compareData[str] = null;
+      }
+    },
+    changeOs(val) {
+      this.compareData.os = val[0];
+      this.compareData.os_version = val[1];
+    },
     isDimesion() {
       if (this.compareData.dimension) {
         this.flag = false;
       }
     },
+    changeFlag() {
+      this.flag = true;
+    },
     compareCandidates() {
-      compareCandidates().then((res) => {
-        this.suiteData = res.query_conditions.suite;
-        this.OSData = res.query_conditions.OS;
+      compareCandidates().then(res => {
+        this.suiteData = res.query_conditions.suite.sort();
+        this.OSData = this.propsdata(res.query_conditions.OS);
         this.osArchData = res.query_conditions.os_arch;
         this.tboxGroupdata = res.query_conditions.tbox_group;
         this.dimensionData = res.dimension;
       });
     },
+    handleValid() {
+      let arrCom = [];
+      for (let item in this.compareData) {
+        if (item !== "dimension") {
+          arrCom.push(this.compareData[item]);
+        }
+      }
+      let boll = arrCom.some(item => {
+        return item != null;
+      });
+      if (boll) {
+        return boll;
+      } else {
+        this.$message("请选择 suite OS os_arch tbox_group 其中至少一个选项");
+      }
+    },
     compare() {
-      this.$refs["ruleForm"].validate((valid) => {
+      this.$refs["ruleForm"].validate(valid => {
         if (valid) {
-          let subQuery = {};
-          if (this.compareData.osStr) {
-            subQuery.os = this.compareData.osStr.split(" ")[0];
-            subQuery.os_version = this.compareData.osStr.split(" ")[1];
+          if (this.handleValid()) {
+            this.$router.push({
+              path: this.$route.path,
+              query: this.compareData
+            });
+
+            compare(this.compareData).then(res => {
+              this.resData = res;
+            });
           }
-          subQuery.suite = this.compareData.suite;
-          subQuery.os_arch = this.compareData.os_arch;
-          subQuery.tbox_group = this.compareData.tbox_group;
-          subQuery.dimension = this.compareData.dimension;
-          compare(subQuery).then((res) => {
-            this.resData = res;
-          });
         } else {
           return false;
         }
       });
     },
+    propsdata(arr) {
+      let result = [];
+      let osdata = [];
+      osdata = arr;
+      osdata.forEach(item => {
+        let obj = {
+          children: []
+        };
+        Object.keys(item).map(key => {
+          if (key === "os") {
+            obj.value = item[key];
+            obj.label = item[key];
+          }
+          if (key === "os_version") {
+            item[key].forEach(iten => {
+              let obj1 = {};
+              obj1.value = iten;
+              obj1.label = iten;
+              obj.children.push(obj1);
+            });
+          }
+        });
+        result.push(obj);
+      });
+      return result;
+    },
+    checkRouteQuery(data) {
+      if (data.dimension == null) {
+        this.$message("请给出dimension值");
+        return false;
+      } else if (
+        data.dimension != "os" &&
+        data.dimension != "os_version" &&
+        data.dimension != "os_arch" &&
+        data.dimension != "suite" &&
+        data.dimension != "tbox_group"
+      ) {
+        this.$message("dimension值错误");
+        return false;
+      } else if (
+        data.suite == null &&
+        data.OS == null &&
+        data.os_arch == null &&
+        data.tbox_group == null
+      ) {
+        this.$message("请给出 suite OS os_arch tbox_group 其中至少一个");
+        return false;
+      }
+      return true;
+    }
   },
   mounted() {
     this.compareCandidates();
-  },
+    var data = this.$route.query;
+    if (Object.keys(data).length > 0 && this.checkRouteQuery(data)) {
+      compare(data).then(res => {
+        this.resData = res;
+      });
+    }
+  }
 };
 </script>
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .filters {
   font-weight: bold;
   padding: 13px 0;
@@ -149,12 +274,12 @@ export default {
   color: #c0c4cc;
   cursor: not-allowed;
   background-image: none;
-  background-color: rgba(0, 65, 189, .8);
+  background-color: rgba(0, 65, 189, 0.8);
   border-color: #ebeef5;
 }
-/deep/.el-form-item__label { 
-    @media screen and (max-width: 1000px) {
-        text-align: left;
-    }
+/deep/.el-form-item__label {
+  @media screen and (max-width: 1000px) {
+    text-align: left;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/disclaimer/disclaimer.vue b/src/views/disclaimer/disclaimer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b7a238a4fd5a5f21530e801e8fd002aed0de12d0
--- /dev/null
+++ b/src/views/disclaimer/disclaimer.vue
@@ -0,0 +1,29 @@
+<template>
+  <div id="disclaimer">
+    <Header class="main-header"></Header>
+    <div class="content">
+      <h1 class="title">Compass CI免责声明</h1>
+      <p class="title-tip">您了解并同意，当您开始使用我们提供的Compass CI软件测试服务（以下简称“本服务”）时，即表示您同意以下条款。</p>
+      <p class="tips">1、我们不会就您使用本服务进行收费。与此同时，请您注意，本服务按现状提供，不带有任何明示或暗示的担保或条件，包括但不限于本服务的可用性、非侵权的默示担保或保证。</p>
+      <p class="tips">2、基于本服务的测试结果可能受到一些因素的干扰（包括但不限于被测试软件本身含有病毒，或测试过程中受到第三方软件攻击等）。因此，测试结果仅供参考，我们不保证测试结果的准确性、可靠性或完整性。</p>
+      <p class="tips">3、本服务只能用于个人学习研究，不允许用于商业目的。如您将测试结果用于商业目的，因此引起的所有责任和法律后果，由您自行承担。</p>
+      <p class="tips">4、您不可以对测试结果进行修改。如您修改测试结果，因此产生的所有责任和法律后果，由您自行承担。</p>
+      <p class="tips">5、在不违反以上条款的前提下，您可以将测试结果向第三方公开，但是您应当在公开时注明“该报告由Compass CI生成”。</p>
+    </div>
+  </div>
+</template>
+<script>
+import Header from "@/components/Header";
+export default {
+  name: "Disclaimer",
+  components: {
+    Header,
+  },
+};
+</script>
+<style lang="less" scope>
+.tips, .title-tip{
+    text-indent: 2em;
+    line-height: 30px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/errorlist/errorlist.vue b/src/views/errorlist/errorlist.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e2b19b26acecaf61b97f2262c4334024d652fe8a
--- /dev/null
+++ b/src/views/errorlist/errorlist.vue
@@ -0,0 +1,77 @@
+
+<template>
+  <div id="errorList">
+    <Header class="main-header"></Header>
+    <div class="content">
+      <h1 class="title">Error List</h1>
+      <el-table :data="tableData" stripe>
+        <template v-for="(item,index) in tableHead">
+          <el-table-column
+            v-if="item!='result_root' && item!='error_id'"
+            :label="item"
+            :prop="item"
+            :key="index"
+            :width="getWidth(index)"
+          >
+            <template slot-scope="scope">
+              <div
+                class="go"
+                v-if="item==='job_id'"
+                @click="goBlank(scope.row['result_root'])"
+              >{{scope.row[item]}}</div>
+              <div class="go" v-else-if="item==='stderr'" @click="goBlank(scope.row[item])">stderr</div>
+              <div v-else>{{scope.row[item]}}</div>
+            </template>
+          </el-table-column>
+        </template>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+import { getErrorList } from "@/api/jobs.js";
+import Header from "@/components/Header";
+import { BASEURLRESULT } from "../../utils/baseUrl.js";
+export default {
+  name: "ErrorList",
+  components: {
+    Header
+  },
+  data() {
+    return {
+      tableHead: [],
+      tableData: [],
+      tableHeader: {},
+      jobsQuery: {}
+    };
+  },
+  methods: {
+    goBlank(src) {
+      src = BASEURLRESULT + src + '/';
+      window.open(src, "_blank");
+    },
+    getData() {
+      getErrorList(this.$route.query).then(res => {
+        this.jobsQuery = res;
+        this.tableHead = this.jobsQuery.attributes;
+        this.tableData = this.jobsQuery.objects;
+      });
+    },
+    getWidth(index) {
+      if (index == 0 || index == 3 || index == 4) return 120;
+
+      return 0;
+    }
+  },
+  mounted() {
+    this.getData();
+  }
+};
+</script>
+<style lang="less" scoped>
+.go {
+  cursor: pointer;
+  color: blue;
+  text-decoration: underline;
+}
+</style>
diff --git a/src/views/home/home.vue b/src/views/home/home.vue
index c787b321157c3d04c491a55ede72bc7200560c93..9368b4698bfdd1b7c76fa199f614f25b17284274 100644
--- a/src/views/home/home.vue
+++ b/src/views/home/home.vue
@@ -3,8 +3,8 @@
     <home-header></home-header>
     <div class="link-card-box">
       <link-card :insideName="Jobs" class="card1"></link-card>
-      <link-card :insideName="compare" class="card2"></link-card>
-      <link-card :insideName="repo" class="card3"></link-card>
+      <link-card :insideName="repo" class="card2"></link-card>
+      <link-card :insideName="compare" class="card3"></link-card>
       <!-- <link-card :insideName="Testboxes" class="card4"></link-card> -->
     </div>
   </div>
@@ -23,58 +23,56 @@ export default {
     return {
       Jobs: {
         name: "Jobs",
-        describe: "列举开源软件测试的状态最新信息",
-      },
-      compare: {
-        name: "Compare results",
-        describe: "查阅开源软件历史测试结果信息",
+        describe: "测试任务最新信息",
       },
       repo: {
         name: "Git repo",
-        describe: "列举当前所有已经融入crystal-ci的开源软件",
+        describe: "已加入的开源软件清单",
+      },
+      compare: {
+        name: "Compare results",
+        describe: "查询及比较历史测试结果",
       },
       Testboxes: {
         name: "Testboxes",
-        describe: "用于查阅当前系统资源的使用状态（待开放）",
+        describe: "用于查阅当前系统资源的使用状态",
       },
     };
   },
   methods: {},
-  mounted() {},
+  mounted() {
+    
+  },
 };
 </script>
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .home {
   position: relative;
   width: 100%;
   .link-card-box {
-    width: 1129px;
     height: 100%;
-    margin-left: 20%;
+    margin: 0 10%;
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin-top: -5%;
+    justify-content: space-between;
+    font-size: 18px;
     @media screen and (max-width: 1000px) {
-        width: 100%;
-        margin-left: 0;
+      width: 100%;
+      margin-left: 0;
+      font-size: 16px;
+      flex-direction: row;
+      flex-wrap: wrap;
     }
     .card1 {
-      margin-bottom: 30px;
       @media screen and (max-width: 1000px) {
         margin: 30px auto 0 auto;
       }
     }
     .card2 {
-      margin-left: 3%;
-      margin-bottom: 30px;
-     @media screen and (max-width: 1000px) {
+      @media screen and (max-width: 1000px) {
         margin: 30px auto 0 auto;
       }
     }
     .card3 {
-      margin-left: 10%;
-      margin-bottom: 30px;
       @media screen and (max-width: 1000px) {
         margin: 30px auto 0 auto;
       }
diff --git a/src/views/jobSummer/jobSummer.vue b/src/views/jobSummer/jobSummer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4b3dc7ba2f040239eaaccf5fc7a12a0c61179cc6
--- /dev/null
+++ b/src/views/jobSummer/jobSummer.vue
@@ -0,0 +1,149 @@
+<template>
+  <div id="JobSummary">
+    <Header class="main-header"></Header>
+    <div class="content">
+      <h1 class="title">Job Summary</h1>
+      <el-form :model="listQuery">
+        <el-form-item label="Filter" class="filter">
+          <el-input v-model="filter" placeholder="eg:suite=iperf os=openeuler"></el-input>
+        </el-form-item>
+        <el-form-item label="Group By" class="group-by">
+          <el-input
+            v-model="listQuery.GROUP_BY"
+            placeholder="eg:os_version"
+            @keydown.enter.native="getData"
+          ></el-input>
+        </el-form-item>
+        <el-form-item class="confirm">
+          <el-button @click="getData">确定</el-button>
+        </el-form-item>
+        <el-form-item class="example">
+          <el-button @click="showExample">Example</el-button>
+        </el-form-item>
+      </el-form>
+
+      <el-table :data="tableData" stripe>
+        <el-table-column v-for="(item,index) in tableHead" :label="item" :prop="item" :key="index">
+          <template slot-scope="scope">
+            <div
+              class="go"
+              v-if="item==='nr_fail'"
+              @click="handleClick(scope.row[listQuery.GROUP_BY])"
+            >{{scope.row[item]}}</div>
+            <div v-else>{{scope.row[item]}}</div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+import { getJobsSummary } from "@/api/jobs.js";
+import Header from "@/components/Header";
+export default {
+  name: "JobSummary",
+  components: {
+    Header
+  },
+  data() {
+    return {
+      tableHead: [],
+      tableData: [],
+      tableHeader: {},
+      filter: "",
+      listQuery: {
+        GROUP_BY: ""
+      },
+      jobsQuery: {}
+    };
+  },
+  methods: {
+    handleClick(id) {
+      let obj = {};
+      if (this.filter) {
+        var filters = this.filter.split(" ");
+        for (var f of filters) {
+          var key_vaule = f.split("=");
+          obj[key_vaule[0]] = key_vaule[1];
+        }
+      }
+
+      obj[this.listQuery.GROUP_BY] = id;
+      this.$router.push({
+        path: "/error-list",
+        query: obj
+      });
+    },
+    parseFilter() {
+      if (this.filter) {
+        var filters = this.filter.split(" ");
+        for (var f of filters) {
+          var key_vaule = f.split("=");
+          this.listQuery[key_vaule[0]] = key_vaule[1];
+        }
+      }
+    },
+    getData() {
+      this.parseFilter();
+      if (Object.keys(this.listQuery).length > 1 && this.listQuery.GROUP_BY) {
+        this.$router.push({
+          path: this.$route.path,
+          query: this.listQuery
+        });
+        getJobsSummary(this.listQuery).then(res => {
+          this.jobsQuery = res;
+          this.tableHead = this.jobsQuery.attributes;
+          this.tableData = this.jobsQuery.objects;
+        });
+      } else {
+        this.$message("Filter和Grounp By为必填项");
+      }
+    },
+    showExample() {
+      this.filter = "suite=openeuler_docker group_id=test_fail";
+      this.listQuery.GROUP_BY = "os";
+    }
+  },
+  mounted() {
+    var data = this.$route.query;
+    if (Object.keys(data).length != 0) {
+      getJobsSummary(data).then(res => {
+        this.jobsQuery = res;
+        this.tableHead = this.jobsQuery.attributes;
+        this.tableData = this.jobsQuery.objects;
+      });
+    }
+  }
+};
+</script>
+
+<style lang='less' scoped>
+.filter,
+.group-by {
+  width: 30%;
+  @media screen and (max-width: 1000px) {
+    width: 100%;
+  }
+}
+.confirm {
+  position: absolute;
+  top: 350px;
+  left: 750px;
+  @media screen and (max-width: 1000px) {
+    display: none;
+  }
+}
+.example {
+  position: absolute;
+  top: 350px;
+  left: 1000px;
+  @media screen and (max-width: 1000px) {
+    display: none;
+  }
+}
+.go {
+  cursor: pointer;
+  color: blue;
+  text-decoration: underline;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/jobs/jobs.vue b/src/views/jobs/jobs.vue
index 284c7f30e9ecb0d4c1fe5ba54e8f3d2197ef5efa..557800fed3847f4f38fd9ebf7a94c07feab64827 100644
--- a/src/views/jobs/jobs.vue
+++ b/src/views/jobs/jobs.vue
@@ -1,8 +1,9 @@
 <template>
   <div id="jobs">
+    <Header class="main-header"></Header>
     <div class="content">
       <h1 class="title">Jobs</h1>
-      <p class="summary">summary</p>
+      <p class="summary">开源软件的测试结果如何，这里告诉你答案</p>
       <el-form :inline="true" class="demo-form-inline">
         <el-form-item label="reports per page" class="select-pages">
           <el-select
@@ -10,26 +11,41 @@
             placeholder="请选择"
             size="medium"
             class="select-page"
-            @change="getJobs"
+            @change="getJobs(listQuery)"
           >
-            <el-option v-for="item in pageSizeOptions" :key="item" :label="item" :value="item"></el-option>
+            <el-option
+              v-for="item in pageSizeOptions"
+              :key="item"
+              :label="item"
+              :value="item"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item class="search">
           <el-input
-            v-model="listQuery.upstream_repo"
-            placeholder="Filter the results"
+            class="search-input"
+            v-model="filter"
+            placeholder="search jobs like: suite=iperf os=openeuler"
             size="medium"
-            @keydown.enter.native="getJobs"
+            @keydown.enter.native="handSearch"
             clearable
-            @clear="getJobs"
+            @clear="clearFilter"
           >
-            <el-button slot="append" icon="el-icon-search" @click="getJobs"></el-button>
+            <el-button
+              slot="append"
+              icon="el-icon-search"
+              @click="handSearch"
+            ></el-button>
           </el-input>
         </el-form-item>
       </el-form>
       <el-table :data="tableData" stripe class="jobs-data">
-        <el-table-column :label="item" :key="index" v-for="(item,index) in tableHead">
+        <el-table-column label="序号" type="index" width="50"></el-table-column>
+        <el-table-column
+          :label="item"
+          :key="index"
+          v-for="(item, index) in tableHead"
+        >
           <template slot-scope="scope">
             <el-tooltip
               class="item"
@@ -38,49 +54,57 @@
               placement="top-start"
               :disabled="toolDisabled"
             >
-              <div slot="content"  v-if="item == 'error_ids'">
-                <template v-for=" (ids,idsIndex) in scope.row[item]">
-                  <p :key="idsIndex">
-                    {{ids+','}}
-                  </p>
+              <div slot="content" v-if="item == 'error_ids'">
+                <template v-for="(ids, idsIndex) in scope.row[item]">
+                  <p :key="idsIndex">{{ ids + "," }}</p>
                 </template>
               </div>
-              <div slot="content"  v-else>{{scope.row[item]}}</div>
+              <div slot="content" v-else>{{ scope.row[item] }}</div>
               <span
                 class="goUrl wrap"
-                @click="goTestBox(testBoxUrl+scope.row[item])"
-                v-if="item ==='testbox'"
+                @click="goBlank(testBoxUrl + checkStr(scope.row.testbox))"
+                v-if="item === 'testbox'"
                 @mouseover="showtip(item)"
-              >{{scope.row[item]}}</span>
+                >{{ scope.row[item] }}</span
+              >
               <span
                 class="goUrl wrap"
-                @click="goResult(resultUrl+scope.row.suite +'/'+ scope.row.id)"
-                v-else-if="item ==='job_state'"
+                @click="goBlank(resultUrl + scope.row.result_root + '/')"
+                v-else-if="item === 'job_state'"
                 @mouseover="showtip(item)"
-              >{{scope.row[item]}}</span>
+                >{{ scope.row[item] }}</span
+              >
               <span
                 class="goUrl wrap"
                 @click="goTree(scope.row[item])"
-                v-else-if="item =='upstream_repo'"
+                v-else-if="item == 'upstream_repo'"
                 @mouseover="showtip(item)"
-              >{{scope.row[item]}}</span>
-              <span class="wrap" v-else-if="item =='error_ids'" @mouseover="showtip(item)">
+                >{{ scope.row[item] }}</span
+              >
+              <span
+                class="wrap"
+                v-else-if="item == 'error_ids'"
+                @mouseover="showtip(item)"
+              >
                 <template v-for="item in scope.row[item]">
-                  <span :key="item">{{item}}</span>
+                  <span :key="item">{{ item }}</span>
                 </template>
               </span>
-              <span class="wrap" v-else @mouseover="showtip(item)">{{scope.row[item]}}</span>
+              <span class="wrap" v-else @mouseover="showtip(item)">{{
+                scope.row[item]
+              }}</span>
             </el-tooltip>
           </template>
         </el-table-column>
       </el-table>
       <el-pagination
         @current-change="handleCurrentChange"
-        :current-page="currentPage"
+        :current-page.sync="listQuery.page_num"
         layout="total, pager, jumper"
         :total="jobsQuery.total"
         class="pagination"
         :pager-count="5"
+        :page-size="listQuery.page_size"
         :small="isSmall"
       ></el-pagination>
     </div>
@@ -88,19 +112,21 @@
 </template>
 <script>
 import { getJobs } from "../../api/jobs.js";
-import {BASEURLRESULT, BASEURLTESTBOX} from "../../utils/baseUrl.js";
+import { BASEURLTESTBOX, BASEURLRESULT } from "../../utils/baseUrl.js";
+import Header from "@/components/Header";
 export default {
   name: "Jobs",
-  components: {},
+  components: {
+    Header,
+  },
   data() {
     return {
       tableHead: [],
       tableData: [],
       state: "",
       tableHeader: {},
-      currentPage: 1,
+      filter: null,
       listQuery: {
-        upstream_repo: null,
         page_size: 10,
         page_num: 1,
       },
@@ -121,7 +147,10 @@ export default {
         item == "upstream_commit" ||
         item == "start_time" ||
         item == "id" ||
-        item == "error_ids"
+        item == "error_ids" ||
+        item == "upstream_branch" ||
+        item == "suite" ||
+        item == "os_version"
       ) {
         this.toolDisabled = false;
       } else {
@@ -136,14 +165,51 @@ export default {
         },
       });
     },
-    goTestBox(src) {
-      window.location.href = src;
+    goBlank(src) {
+      window.open(src, "_blank");
+    },
+    parseFilter() {
+      var filters = this.filter.split(" ");
+      this.clearListQuery();
+      for (var f of filters) {
+        var key_vaule = f.split("=");
+        this.listQuery[key_vaule[0]] = key_vaule[1];
+      }
+    },
+    updateURL(data) {
+      var routeQuery = {};
+      for (var x in data) {
+        if (x != "page_num" && x != "page_size") {
+          routeQuery[x] = data[x];
+        }
+      }
+      this.$router.push({
+        path: this.$route.path,
+        query: routeQuery,
+      });
+    },
+    clearListQuery(){
+      var tmp = { page_size: null, page_num: null };
+      tmp.page_size = this.listQuery.page_size;
+      tmp.page_num = 1;
+      this.listQuery = tmp;
     },
-    goResult(src) {
-      window.location.href = src;
+    clearFilter(){
+      this.clearListQuery();
+      this.getJobs(this.listQuery);
     },
-    getJobs() {
-      getJobs(this.listQuery).then((res) => {
+    handSearch() {
+      if (this.filter) {
+        this.parseFilter();
+        this.getJobs(this.listQuery);
+      } else {
+        this.clearListQuery();
+        this.getJobs(this.listQuery);
+      }
+    },
+    getJobs(data) {
+      this.updateURL(data);
+      getJobs(data).then((res) => {
         this.jobsQuery = res;
         this.tableHead = this.jobsQuery.fields;
         this.tableData = this.jobsQuery.jobs;
@@ -156,7 +222,7 @@ export default {
     },
     handleCurrentChange(val) {
       this.listQuery.page_num = val;
-      this.getJobs();
+      this.getJobs(this.listQuery);
     },
     isMobile() {
       let flag = navigator.userAgent.match(
@@ -164,15 +230,36 @@ export default {
       );
       return flag;
     },
+    checkStr(str) {
+      let resultStr = "";
+      let strReg = /(^vm|^dc)/;
+      if (strReg.test(str)) {
+        resultStr = str.split(".")[0];
+      } else {
+        let strArr = str.split("--");
+        let firstStr = strArr[0];
+        let sedStr = strArr[1];
+        if (sedStr) {
+          resultStr = firstStr + "--" + sedStr.split("-")[0];
+        } else {
+          resultStr = firstStr;
+        }
+      }
+      return resultStr;
+    },
   },
   mounted() {
     this.testBoxUrl = BASEURLTESTBOX;
     this.resultUrl = BASEURLRESULT;
-    this.getJobs();
+    var data = this.$route.query;
+    data.page_size = this.listQuery.page_size;
+    data.page_num = this.listQuery.page_num;
+
+    this.getJobs(data);
   },
 };
 </script>
-<style lang='scss' scoped>
+<style lang="less" scoped>
 .jobs-data {
   width: 100%;
 }
@@ -182,6 +269,9 @@ export default {
     margin-left: 0;
   }
 }
+.search-input {
+  width: 550px;
+}
 .select-page {
   width: 113px;
 }
@@ -191,4 +281,7 @@ export default {
 .ids-num {
   color: #002fa7;
 }
-</style>
\ No newline at end of file
+/deep/.el-table th > .cell {
+  font-weight: bold;
+}
+</style>
diff --git a/src/views/oepkgs/oepkgs.vue b/src/views/oepkgs/oepkgs.vue
new file mode 100644
index 0000000000000000000000000000000000000000..12957ac848c9e73190ef25764f888eae71b8952d
--- /dev/null
+++ b/src/views/oepkgs/oepkgs.vue
@@ -0,0 +1,313 @@
+<template>
+  <div id="jobs">
+    <Header class="main-header"></Header>
+    <div class="content">
+      <h1 class="title">RPM Packages</h1>
+      <p class="summary">这是oepkgs仓库的搜索入口，请输入您要查询的软件名</p>
+      <el-form :inline="true" class="demo-form-inline">
+        <el-form-item label="reports per page" class="select-pages">
+          <el-select
+            v-model="listQuery.page_size"
+            placeholder="请选择"
+            size="medium"
+            class="select-page"
+            @change="getSrpms(listQuery)"
+          >
+            <el-option
+              v-for="item in pageSizeOptions"
+              :key="item"
+              :label="item"
+              :value="item"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item class="search">
+          <el-input
+            class="search-input"
+            v-model="filter"
+            placeholder="search software name like: python"
+            size="medium"
+            @keydown.enter.native="handSearch"
+            clearable
+            @clear="clearFilter"
+          >
+            <el-button
+              slot="append"
+              icon="el-icon-search"
+              @click="handSearch"
+            ></el-button>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <el-table :data="tableData" stripe class="jobs-data">
+        <el-table-column label="序号" type="index" width="50"></el-table-column>
+        <el-table-column
+          :label="getLable(item)"
+          :key="index"
+          v-for="(item, index) in tableHead"
+          :prop="item"
+          :width="getWidth(item)"
+        >
+          <template slot-scope="scope">
+            <el-tooltip
+              class="item"
+              effect="light"
+              :content="String(scope.row[item])"
+              placement="top-start"
+              :disabled="toolDisabled"
+            >
+              <div slot="content" v-if="item == 'error_ids'">
+                <template v-for="(ids, idsIndex) in scope.row[item]">
+                  <p :key="idsIndex">{{ ids + "," }}</p>
+                </template>
+              </div>
+              <div slot="content" v-else>{{ scope.row[item] }}</div>
+              <span
+                class="goUrl wrap"
+                @click="goBlank(scope.row.result_url)"
+                v-if="item === 'result_url'"
+                @mouseover="showtip(item)"
+                >测试结果</span
+              >
+              <span
+                class="goUrl wrap"
+                @click="
+                  goBlank(
+                    'https://repo.oepkgs.net/openEuler/rpm/' +
+                      updateOs(scope.row.os) +
+                      '/' +
+                      scope.row.repo_name
+                  )
+                "
+                v-else-if="item === 'repo_name'"
+                @mouseover="showtip(item)"
+                >仓库地址</span
+              >
+              <span
+                class="goUrl wrap"
+                @click="goBlank(scope.row.rpmbuild_result_url)"
+                v-else-if="item === 'rpmbuild_result_url'"
+                @mouseover="showtip(item)"
+                >测试结果</span
+              >
+              <span
+                class="goUrl wrap"
+                @click="goBlank(scope.row.srpm_addr)"
+                v-else-if="item == 'srpm_addr'"
+                @mouseover="showtip(item)"
+                >源码地址</span
+              >
+              <span
+                class="wrap"
+                v-else-if="item == 'error_ids'"
+                @mouseover="showtip(item)"
+              >
+                <template v-for="item in scope.row[item]">
+                  <span :key="item">{{ item }}</span>
+                </template>
+              </span>
+              <span class="wrap" v-else @mouseover="showtip(item)">{{
+                scope.row[item]
+              }}</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page.sync="listQuery.page_num"
+        :page-size="listQuery.page_size"
+        layout="total, prev, pager, next"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import { getSrpms } from "../../api/jobs.js";
+//import { BASEURLTESTBOX, BASEURLRESULT } from "../../utils/baseUrl.js";
+export default {
+  name: "Oepkgs",
+  data() {
+    return {
+      pageSizeOptions: [10, 20, 30],
+      tableData: [],
+      totalData: [],
+      total: 1000,
+      filter: null,
+      tableHeader: {},
+      toolDisabled: false,
+      jobsQuery: {},
+      listQuery: {
+        page_size: 10,
+        page_num: 0,
+      },
+      tableHead: [
+        "srpm_addr",
+        "softwareName",
+        "version",
+        "arch",
+        "os",
+        "repo_name",
+        "result_url",
+        "rpmbuild_result_url",
+      ],
+    };
+  },
+  computed: {
+    filtpackages() {
+      return this.tableData.filter((p) => {
+        return p.softwareName.indexOf(this.filter) !== -1;
+      });
+    },
+  },
+  methods: {
+    showtip(item) {
+      if (
+        item == "srpm_addr" ||
+        item == "softwareName" ||
+        item == "version" ||
+        item == "os" ||
+        item == "repo_name" ||
+        item == "result_url" ||
+        item == "rpmbuild_result_url"
+      ) {
+        this.toolDisabled = false;
+      } else {
+        this.toolDisabled = true;
+      }
+    },
+    parseFilter() {
+      this.clearListQuery();
+      this.listQuery["softwareName"] = this.filter;
+    },
+    handleCurrentChange(val) {
+      this.listQuery.page_num = val;
+      this.getSrpms(this.listQuery);
+    },
+    clearListQuery() {
+      var tmp = { page_size: null, page_num: null };
+      tmp.page_size = this.listQuery.page_size;
+      tmp.page_num = 1;
+      this.listQuery = tmp;
+    },
+    clearFilter() {
+      this.clearListQuery();
+      this.getSrpms(this.listQuery);
+    },
+    handSearch() {
+      if (this.filter) {
+        this.parseFilter();
+        this.getSrpms(this.listQuery);
+      } else {
+        this.clearListQuery();
+        this.getSrpms(this.listQuery);
+      }
+    },
+    updateURL(data) {
+      var routeQuery = {};
+      for (var x in data) {
+        if (x != "page_num" && x != "page_size") {
+          routeQuery[x] = data[x];
+        }
+      }
+      this.$router.push({
+        path: this.$route.path,
+        query: routeQuery,
+      });
+    },
+    getSrpms(data) {
+      this.updateURL(data);
+      getSrpms(data).then((res) => {
+        this.jobsQuery = res;
+        console.log(this.jobsQuery, "jobquery是什么？");
+        this.tableData = this.jobsQuery.info;
+        this.total = this.jobsQuery.total;
+        if (this.jobsQuery.total > 10000) {
+          this.total = 10000;
+        } else {
+          this.total = this.jobsQuery.total;
+        }
+        console.log(this.tableData);
+      });
+    },
+    goBlank(src) {
+      window.open(src, "_blank");
+    },
+    handleSizeChange(val) {
+      this.listQuery.page_size = val;
+      this.getSrpms(this.listQuery);
+    },
+    updateOs(str) {
+      let resultStr = "";
+      let strArr = str.split(" ");
+      let firstStr = strArr[0];
+      let sedStr = strArr[1];
+      if (firstStr) {
+        resultStr = "openEuler-" + sedStr;
+      } else {
+        resultStr = firstStr;
+      }
+      return resultStr;
+    },
+    getWidth(item) {
+      if (
+        item == "srpm_addr" ||
+        item == "version" ||
+        item == "arch" ||
+        item == "repo_name"
+      ) {
+        return 140;
+      } else if (item == "os") {
+        return 230;
+      } else if (item == "result_url" || item == "rpmbuild_result_url") {
+        return 160;
+      }
+    },
+    getLable(item) {
+      if (item == "result_url") {
+        return "install_result_url";
+      }
+      return item;
+    },
+  },
+  mounted() {
+    var data = this.$route.query;
+    console.log(data, "data是什么？");
+    data.page_size = this.listQuery.page_size;
+    data.page_num = this.listQuery.page_num;
+
+    this.getSrpms(data);
+  },
+};
+</script>
+
+
+<style lang="less" scoped>
+.jobs-data {
+  width: 100%;
+}
+.search {
+  margin-left: 92px;
+  @media screen and (max-width: 1000px) {
+    margin-left: 0;
+  }
+}
+.search-input {
+  width: 550px;
+}
+.select-page {
+  width: 113px;
+}
+/deep/.el-form-item__label {
+  font-weight: bold;
+}
+.ids-num {
+  color: #002fa7;
+}
+/deep/.el-table th > .cell {
+  font-weight: bold;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/performanceresult/performancelist.vue b/src/views/performanceresult/performancelist.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7ffa43d65d87a8036010ab5755a299b7e33a90aa
--- /dev/null
+++ b/src/views/performanceresult/performancelist.vue
@@ -0,0 +1,2687 @@
+
+<template>
+  <div id="CustomErrorBar">
+    <Header class="main-header"></Header>
+    <h1 class="title">Performance Result</h1>
+    <div class="content">
+      <div style="background-color: #eeeeee; float: left">
+        <p style="text-align: center; margin-top: 10px; margin-bottom: 10px">
+          <font size="5">比较基线</font>
+        </p>
+        <div style="float: left">
+          <el-form>
+            <el-form-item label="os" label-width="120px" class="input_class">
+              <el-select
+                v-model="os_a"
+                filterable
+                placeholder="请选择"
+                size="medium"
+                clearable
+                @change="selectChangeVersiona"
+              >
+                <el-option
+                  v-for="item in osData"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              label="os_version"
+              label-width="120px"
+              class="input_class"
+            >
+              <el-select
+                v-model="os_version_a"
+                filterable
+                placeholder="请选择"
+                size="medium"
+                clearable
+                @change="getSelectGroupa"
+              >
+                <el-option
+                  v-for="item in versionData_a"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item
+              label="group_id"
+              label-width="120px"
+              class="input_class"
+            >
+              <el-select
+                v-model="group_id_a"
+                filterable
+                placeholder="请选择"
+                size="medium"
+                clearable
+              >
+                <el-option
+                  v-for="item in groupData_a"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+
+      <div style="float: right">
+        <el-form>
+          <el-form-item>
+            <el-button @click="addObject">增加</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="delObject">删除</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div
+        id="compareObject"
+        style="background-color: #eeeeee; float: right; margin-right: 20px"
+      >
+        <p style="text-align: center; margin-top: 10px; margin-bottom: 10px">
+          <font size="5">对比对象</font>
+        </p>
+        <div style="float: left">
+          <el-form>
+            <el-form-item label="os" label-width="120px" class="input_class">
+              <el-select
+                v-model="os_b"
+                filterable
+                placeholder="请选择"
+                size="medium"
+                clearable
+                @change="selectChangeVersionb"
+              >
+                <el-option
+                  v-for="item in osData"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              label="os_version"
+              label-width="120px"
+              class="input_class"
+            >
+              <el-select
+                v-model="os_version_b"
+                filterable
+                placeholder="请选择"
+                size="medium"
+                clearable
+                @change="getSelectGroupb"
+              >
+                <el-option
+                  v-for="item in versionData_b"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              label="group_id"
+              label-width="120px"
+              class="input_class"
+            >
+              <el-select
+                v-model="group_id_b"
+                filterable
+                placeholder="请选择"
+                size="medium"
+                clearable
+              >
+                <el-option
+                  v-for="item in groupData_b"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div
+          v-for="(obj, index) in compare_object"
+          :key="index"
+          style="float: left"
+        >
+          <el-form>
+            <el-form-item class="input_class">
+              <el-select
+                v-model="obj.os"
+                filterable
+                placeholder="请选择"
+                size="medium"
+                clearable
+                @change="selectChangeVersion(index, obj.os)"
+              >
+                <el-option
+                  v-for="item in osData"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item class="input_class">
+              <el-select
+                v-model="obj.os_version"
+                filterable
+                placeholder="请选择"
+                size="medium"
+                clearable
+                @change="getSelectGroup(index, obj.os_version)"
+              >
+                <el-option
+                  v-for="item in obj.versionData"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item class="input_class">
+              <el-select
+                v-model="obj.group_id"
+                filterable
+                placeholder="请选择"
+                size="medium"
+                clearable
+              >
+                <el-option
+                  v-for="item in obj.groupData"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <div style="float: left; width: 100%; margin-top: 20px">
+        <div style="float: left; width: 45%; margin-left: 20%">
+          <el-radio-group v-model="suite" @change="radioChange">
+            <el-radio label="stream">stream</el-radio>
+            <el-radio label="netperf">netperf</el-radio>
+            <el-radio label="unixbench">unixbench</el-radio>
+            <el-radio label="lmbench3">lmbench3</el-radio>
+            <el-radio label="libmicro">libmicro</el-radio>
+            <el-radio label="fio-basic">fio-basic</el-radio>
+          </el-radio-group>
+        </div>
+        <div style="float: left">
+          <el-form>
+            <el-form-item class="confirm">
+              <el-button @click="queryCharts">确定</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div style="float: left; margin-left: 7%">
+          <el-form>
+            <el-form-item class="confirm">
+              <el-button @click="getExcel">导出</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div style="float: left; margin-left: 30%">
+          <el-transfer
+            filterable
+            :titles="['可选表头项', '已选表头项']"
+            v-model="transfer_chosen"
+            :data="transfer_data"
+            @change="transferChange"
+          >
+          </el-transfer>
+        </div>
+      </div>
+    </div>
+    <div id="container" class="containers">
+      <div>
+        <el-dialog :title="testbox" :visible.sync="dialogTableVisible">
+          <textarea
+            v-model="textData"
+            style="font-size: 15pt; width: 100%"
+            rows="33"
+            disabled
+          ></textarea>
+        </el-dialog>
+      </div>
+      <div v-show="im_show">
+        <el-table
+          :data="table_improve"
+          border
+          :header-cell-style="{ background: '#ffc000', color: '#000' }"
+          style="width: 500px"
+        >
+          <el-table-column
+            :label="suite"
+            prop="compare_versions"
+          ></el-table-column>
+          <el-table-column
+            label="总体性能提升比例"
+            prop="improvement"
+            width="150"
+          ></el-table-column>
+        </el-table>
+      </div>
+      <div
+        v-for="(l_item, l_index) in unixbench_data.table_data"
+        :key="l_index"
+      >
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ l_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(l_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="l_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in unixbench_filter(l_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${l_item.title.replace(
+            '.',
+            '_'
+          )}_${l_index}_${l_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${l_item.title.replace(
+            '.',
+            '_'
+          )}_${l_index}_${l_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+      </div>
+
+      <div v-for="(t_item, t_index) in libmicro_data.table_data" :key="t_index">
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ t_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(t_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="t_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in libmicro_filter(t_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+      </div>
+
+      <div v-for="(t_item, t_index) in stream_data.table_data" :key="t_index">
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ t_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(t_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="t_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in stream_filter(t_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+      </div>
+
+      <div v-for="(t_item, t_index) in fio_data.table_data" :key="t_index">
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ t_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(t_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="t_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in fio_filter(t_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+          v-show="t_item.data.length > 2"
+        ></div>
+      </div>
+
+      <div v-for="(t_item, t_index) in fio_data_b.table_data" :key="t_index">
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ t_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(t_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="t_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in fio_filter(t_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+          v-show="t_item.data.length > 2"
+        ></div>
+      </div>
+
+      <div v-for="(t_item, t_index) in fio_data_c.table_data" :key="t_index">
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ t_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(t_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="t_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in fio_filter(t_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+          v-show="t_item.data.length > 2"
+        ></div>
+      </div>
+
+      <div
+        v-for="(t_item, t_index) in lmbench_data_a.table_data"
+        :key="t_index"
+      >
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ t_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(t_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="t_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in lmbench3_filter(t_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+          v-show="t_item.data.length > 2"
+        ></div>
+      </div>
+
+      <div
+        v-for="(t_item, t_index) in lmbench_data_b.table_data"
+        :key="t_index"
+      >
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ t_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(t_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="t_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in lmbench3_filter(t_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+          v-show="t_item.data.length > 2"
+        ></div>
+      </div>
+
+      <div
+        v-for="(t_item, t_index) in lmbench_data_c.table_data"
+        :key="t_index"
+      >
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ t_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(t_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="t_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in lmbench3_filter(t_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+          v-show="t_item.data.length > 2"
+        ></div>
+      </div>
+
+      <div
+        v-for="(t_item, t_index) in lmbench_data_d.table_data"
+        :key="t_index"
+      >
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ t_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(t_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="t_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in lmbench3_filter(t_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+          v-show="t_item.data.length > 2"
+        ></div>
+      </div>
+
+      <div
+        v-for="(t_item, t_index) in lmbench_data_e.table_data"
+        :key="t_index"
+      >
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ t_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(t_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="t_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in lmbench3_filter(t_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+          v-show="t_item.data.length > 2"
+        ></div>
+      </div>
+
+      <div
+        v-for="(t_item, t_index) in lmbench_data_f.table_data"
+        :key="t_index"
+      >
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ t_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(t_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="t_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in lmbench3_filter(t_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+          v-show="t_item.data.length > 2"
+        ></div>
+      </div>
+
+      <div v-for="(l_item, l_index) in netperfb_data.table_data" :key="l_index">
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ l_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(l_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="l_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in netperf_filter(l_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${l_item.title.replace(
+            '.',
+            '_'
+          )}_${l_index}_${l_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${l_item.title.replace(
+            '.',
+            '_'
+          )}_${l_index}_${l_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+      </div>
+
+      <div v-for="(l_item, l_index) in netperfa_data.table_data" :key="l_index">
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ l_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(l_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="l_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in netperf_filter(l_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${l_item.title.replace(
+            '.',
+            '_'
+          )}_${l_index}_${l_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${l_item.title.replace(
+            '.',
+            '_'
+          )}_${l_index}_${l_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getPerformanceResult, QueryField, getHostInfo } from "@/api/jobs.js";
+import Header from "@/components/Header";
+import echarts from "echarts";
+import XLSX from "xlsx";
+import XLSXS from "xlsx-style";
+import filesaver from "file-saver";
+export default {
+  name: "CustomErrorBar",
+  components: { Header },
+  data() {
+    return {
+      textData: "",
+      testbox: "",
+      dialogTableVisible: false,
+      stream_selected: [],
+      netperf_selected: [],
+      unixbench_selected: [],
+      lmbench3_selected: [],
+      libmicro_selected: [],
+      fio_selected: [],
+      t_headers: ["copy", "scale", "add", "triad"],
+      transfer_data: [],
+      transfer_chosen: [],
+      compare_object: [],
+      suite: "stream",
+      osData: [],
+      versionData_a: [],
+      versionData_b: [],
+      groupData_a: [],
+      groupData_b: [],
+      checkQuery: {
+        filter: {
+          suite: [],
+          os: [],
+          os_version: [],
+        },
+        field: "os",
+      },
+      checkQuery_b: {
+        filter: {
+          suite: [],
+          os: [],
+          os_version: [],
+        },
+        field: "os",
+      },
+      os_a: "",
+      os_b: "",
+      os_version_a: "",
+      os_version_b: "",
+      group_id_a: "",
+      group_id_b: "",
+      stream_data: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: {
+            suite: ["stream"],
+            group_id: [],
+          },
+          metrics: [
+            "stream.copy_bandwidth_MBps",
+            "stream.scale_bandwidth_MBps",
+            "stream.add_bandwidth_MBps",
+            "stream.triad_bandwidth_MBps",
+          ],
+          series: [
+            { os: "openeuler", os_version: "21.03-iso" },
+            { os: "openeuler", os_version: "21.09-iso" },
+          ],
+          x_params: ["metric"],
+        },
+      },
+      lmbench_data_a: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: { suite: ["lmbench3"], group_id: [] },
+          metrics: [
+            "lmbench3.syscall.syscall.latency.us",
+            "lmbench3.syscall.stat.latency.us",
+            "lmbench3.syscall.open/close.latency.us",
+            "lmbench3.null_io",
+            "lmbench3.Process.fork+exit.latency.us",
+            ".Process.fork+execve.latency.us",
+            "lmbench3.Process.fork+/bin/sh.latency.us",
+            "lmbench3.Select.100tcp.latency.us",
+            "lmbench3.sig_inst",
+            "lmbench3.sig_hndl",
+          ],
+          series: [
+            { os: "openeuler", os_version: "21.03-iso" },
+            { os: "openeuler", os_version: "21.09-iso" },
+          ],
+          x_params: ["metric"],
+          title: "Processor_Processes",
+        },
+      },
+      lmbench_data_b: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: { suite: ["lmbench3"], group_id: [] },
+          metrics: [
+            "lmbench3.PIPE.latency.us",
+            "lmbench3.AF_UNIX.sock.stream.latency.us",
+            "lmbench3.UDP.usinglocalhost.latency.us",
+            "lmbench3.TCP.localhost.latency",
+            "lmbench3.CONNECT.localhost.latency.us",
+          ],
+          series: [
+            { os: "openeuler", os_version: "21.03-iso" },
+            { os: "openeuler", os_version: "21.09-iso" },
+          ],
+          x_params: ["metric"],
+          title: "local_latency",
+        },
+      },
+      lmbench_data_c: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: { suite: ["lmbench3"], group_id: [] },
+          metrics: [
+            "lmbench3.PIPE.bandwidth.MB/sec",
+            "mbench3.AF_UNIX.sock.stream.bandwidth.MB",
+            "lmbench3.TCP.socket.bandwidth.10MB.MB/sec",
+            "lmbench3.FILE.read.bandwidth.MB/sec",
+            "lmbench3.MMAP.read.bandwidth.MB/sec",
+            "lmbench3.BCOPY.libc.bandwidth.MB/sec",
+            "lmbench3.BCOPY.unrolled.bandwidth.MB/sec",
+            "lmbench3.BCOPY.memory_read.bandwidth.MB/sec",
+            "lmbench3.BCOPY.memory_write.bandwidth.MB/sec",
+          ],
+          series: [
+            { os: "openeuler", os_version: "21.03-iso" },
+            { os: "openeuler", os_version: "21.09-iso" },
+          ],
+          x_params: ["metric"],
+          title: "local_bandwidths",
+        },
+      },
+      lmbench_data_d: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: { suite: ["lmbench3"], group_id: [] },
+          metrics: [
+            "lmbench3.CTX.2P.0K.latency.us",
+            "lmbench3.CTX.2P.16K.latency.us",
+            "lmbench3.CTX.2P.64K.latency.us",
+            "lmbench3.CTX.8P.16K.latency.us",
+            "lmbench3.CTX.8P.64K.latency.us",
+            "lmbench3.CTX.16P.16K.latency.us",
+            "lmbench3.CTX.16P.64K.latency.us",
+          ],
+          series: [
+            { os: "openeuler", os_version: "21.03-iso" },
+            { os: "openeuler", os_version: "21.09-iso" },
+          ],
+          x_params: ["metric"],
+          title: "Context_switching",
+        },
+      },
+      lmbench_data_e: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: { suite: ["lmbench3"], group_id: [] },
+          metrics: [
+            "lmbench3.Mmap_Latency",
+            "lmbench3.Prot_Fault",
+            "lmbench3.Pagefaults.ms",
+            "lmbench3.Select.100fd.latency.us",
+          ],
+          series: [
+            { os: "openeuler", os_version: "21.03-iso" },
+            { os: "openeuler", os_version: "21.09-iso" },
+          ],
+          x_params: ["metric"],
+          title: "VM_latencies",
+        },
+      },
+      lmbench_data_f: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: { suite: ["lmbench3"], group_id: [] },
+          metrics: [
+            "lmbench3.L1_$",
+            "lmbench3.L2_$",
+            "lmbench3.Main_mem",
+            "lmbench3.Rand_mem",
+          ],
+          series: [
+            { os: "openeuler", os_version: "21.03-iso" },
+            { os: "openeuler", os_version: "21.09-iso" },
+          ],
+          x_params: ["metric"],
+          title: "Memor_latencies",
+          test_params: ["pp.lmbench3.nr_threads"],
+        },
+      },
+      libmicro_data: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: { suite: ["libmicro"], group_id: [] },
+          metrics: [],
+          series: [
+            { os: "openeuler", os_version: "21.03-iso" },
+            { os: "openeuler", os_version: "21.09-iso" },
+          ],
+          x_params: ["metric"],
+        },
+      },
+      unixbench_data: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: { suite: ["unixbench"], nr_task: [1, 96], group_id: [] },
+          metrics: ["unixbench.score"],
+          series: [
+            { os: "openeuler", os_version: "21.03-iso" },
+            { os: "openeuler", os_version: "21.09-iso" },
+          ],
+          x_params: ["test"],
+        },
+      },
+      fio_data: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: {
+            suite: ["fio-basic"],
+            "pp.fio-setup-basic.rw": ["randrw"],
+            group_id: [],
+          },
+          metrics: [
+            "fio.read_iops",
+            "fio.read_bw_MBps",
+            "fio.write_iops",
+            "fio.write_bw_MBps",
+          ],
+          series: [
+            { os: "openeuler", os_version: "21.03-iso" },
+            { os: "openeuler", os_version: "21.09-iso" },
+          ],
+          x_params: ["bs"],
+          test_params: ["pp.fio-setup-basic.rw"],
+        },
+      },
+      fio_data_b: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: {
+            suite: ["fio-basic"],
+            "pp.fio-setup-basic.rw": ["read", "randread"],
+            group_id: [],
+          },
+          metrics: ["fio.read_iops", "fio.read_bw_MBps"],
+          series: [
+            { os: "openeuler", os_version: "21.03-iso" },
+            { os: "openeuler", os_version: "21.09-iso" },
+          ],
+          x_params: ["bs"],
+          test_params: ["pp.fio-setup-basic.rw"],
+        },
+      },
+      fio_data_c: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: {
+            suite: ["fio-basic"],
+            "pp.fio-setup-basic.rw": ["write", "randwrite"],
+            group_id: [],
+          },
+          metrics: ["fio.write_iops", "fio.wirte_bw_MBps"],
+          series: [
+            { os: "openeuler", os_version: "21.03-iso" },
+            { os: "openeuler", os_version: "21.09-iso" },
+          ],
+          x_params: ["bs"],
+          test_params: ["pp.fio-setup-basic.rw"],
+        },
+      },
+      netperfa_data: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: {
+            suite: ["netperf"],
+            "pp.netperf.test": ["TCP_STREAM", "UDP_STREAM"],
+            "pp.netperf.runtime": [60],
+            group_id: [],
+          },
+          metrics: ["netperf.Throughput_Mbps"],
+          series: [
+            { os: "openeuler", os_version: "21.03-iso" },
+            { os: "openeuler", os_version: "21.09-iso" },
+          ],
+          x_params: ["send_size"],
+        },
+      },
+      netperfb_data: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: {
+            suite: ["netperf"],
+            group_id: [],
+            "pp.netperf.test": ["TCP_RR", "TCP_CRR", "UDP_RR"],
+            "pp.netperf.runtime": [60],
+          },
+          metrics: ["netperf.Throughput_tps"],
+          series: [
+            { os: "openeuler", os_version: "21.03-iso" },
+            { os: "openeuler", os_version: "21.09-iso" },
+          ],
+          x_params: ["test"],
+        },
+      },
+      title_dic: {
+        stream: "Function",
+        "stream-copy_bandwidth_MBps": "copy",
+        "stream-scale_bandwidth_MBps": "scale",
+        "stream-add_bandwidth_MBps": "add",
+        "stream-triad_bandwidth_MBps": "triad",
+        "netperf-Throughput_tps": "Protocol_kind",
+        libmicro: "Function",
+        "whetston-double": "Double-Precision_Whetstone",
+        shell1: "Shell_Scripts_(1_concurrent)",
+        shell8: "Shell_Scripts_(8_concurrent)",
+        pipe: "Pipe_Throughput",
+        context1: "Pipe-based_Context_Switching",
+        spawn: "Process_Creation",
+        syscall: "System_Call_Overhead",
+        dhry2reg: "Dhrystone_2_using_register_variables",
+        fstime: "File_Copy_1024_bufsize_2000_maxblocks",
+        fsbuffer: "File_Copy_256_bufsize_500_maxblocks",
+        fsdisk: "File_Copy_4096_bufsize_8000_maxblocks",
+        execl: "Execl_Throughput",
+        "lmbench3-syscall-syscall-latency-us": "null_call",
+        "lmbench3-null_io": "null_io",
+        "lmbench3-syscall-stat-latency-us": "stat",
+        "lmbench3-syscall-open/close-latency-us": "open_close",
+        "lmbench3-Select-100tcp-latency-us": "slct_TCP",
+        "lmbench3-sig_inst": "sig_inst",
+        "lmbench3-sig_hndl": "sig_hndl",
+        "lmbench3-Process-fork+exit-latency-us": "fork_proc",
+        "lmbench3-Process-fork+execve-latency-us": "exec_proc",
+        "lmbench3-Process-fork+/bin/sh-latency-us": "sh_proc",
+        "lmbench3-PIPE-latency-us": "Pipe",
+        "lmbench3-AF_UNIX-sock-stream-latency-us": "AF_UNIX",
+        "lmbench3-UDP-usinglocalhost-latency-us": "UDP",
+        "lmbench3-TCP-localhost-latency": "TCP",
+        "lmbench3-CONNECT-localhost-latency-us": "TCP_conn",
+        "lmbench3-PIPE-bandwidth-MB/sec": "Pipe",
+        "mbench3-AF_UNIX-sock-stream-bandwidth-MB": "AF_UNIX",
+        "lmbench3-TCP-socket-bandwidth-10MB-MB/sec": "TCP",
+        "lmbench3-FILE-read-bandwidth-MB/sec": "File_reread",
+        "lmbench3-MMAP-read-bandwidth-MB/sec": "Mmap_reread",
+        "lmbench3-BCOPY-libc-bandwidth-MB/sec": "copy(libc)",
+        "lmbench3-BCOPY-unrolled-bandwidth-MB/sec": "copy(hand)",
+        "lmbench3-BCOPY-memory_read-bandwidth-MB/sec": "Mem_read",
+        "lmbench3-BCOPY-memory_write-bandwidth-MB/sec": "Mem_write",
+        "lmbench3-CTX-2P-0K-latency-us": "2p/0K",
+        "lmbench3-CTX-2P-16K-latency-us": "2p/16K",
+        "lmbench3-CTX-2P-64K-latency-us": "2p/64K",
+        "lmbench3-CTX-8P-16K-latency-us": "8p/16K",
+        "lmbench3-CTX-8P-64K-latency-us": "8p/64K",
+        "lmbench3-CTX-16P-16K-latency-us": "16p/16K",
+        "lmbench3-CTX-16P-64K-latency-us": "16p/64K",
+        "lmbench3-Mmap_Latency": "Mmap_Latency",
+        "lmbench3-Prot_Fault": "Prot_Fault",
+        "lmbench3-Pagefaults-ms": "Page_Fault",
+        "lmbench3-Select-100fd-latency-us": "100fd_selct",
+        "lmbench3-L1_$": "L1_$",
+        "lmbench3-L2_$": "L2_$",
+        "lmbench3-Main_mem": "Main_mem",
+        "lmbench3-Rand_mem": "Rand_mem",
+      },
+      improve_percent: {},
+      table_improve: [],
+      im_show: false,
+    };
+  },
+  methods: {
+    renderDeviationAreaArray(dataArray, deviationArray) {
+      //用于生成方差区域的数组
+      var deviationAreaArray = [];
+      var len = dataArray.length;
+      for (var i = 0; i < len; i++) {
+        deviationAreaArray.push([
+          i,
+          dataArray[i] + (dataArray[i] * deviationArray[i]) / 100,
+          dataArray[i] - (dataArray[i] * deviationArray[i]) / 100,
+        ]); //[x坐标序号,最大值，最小值]
+      }
+      return deviationAreaArray;
+    },
+    renderItem(_params, api) {
+      //生成描绘方差图所需的参数
+      var xValue = api.value(0);
+      var highPoint = api.coord([xValue, api.value(1)]);
+      var lowPoint = api.coord([xValue, api.value(2)]);
+      var halfWidth = api.size([1, 0])[0] * 0.1;
+      var style = api.style({
+        stroke: api.visual("color"),
+        fill: null,
+      });
+
+      return {
+        type: "group",
+        children: [
+          {
+            type: "line",
+            transition: ["shape"],
+            shape: {
+              x1: highPoint[0] - halfWidth,
+              y1: highPoint[1],
+              x2: highPoint[0] + halfWidth,
+              y2: highPoint[1],
+            },
+            style: style,
+          },
+          {
+            type: "line",
+            transition: ["shape"],
+            shape: {
+              x1: highPoint[0],
+              y1: highPoint[1],
+              x2: lowPoint[0],
+              y2: lowPoint[1],
+            },
+            style: style,
+          },
+          {
+            type: "line",
+            transition: ["shape"],
+            shape: {
+              x1: lowPoint[0] - halfWidth,
+              y1: lowPoint[1],
+              x2: lowPoint[0] + halfWidth,
+              y2: lowPoint[1],
+            },
+            style: style,
+          },
+        ],
+      };
+    },
+    renderSeries(sourceData, echart_type) {
+      //描绘折线图+方差图所需的参数
+      var series = [];
+      for (var j = 0; j < sourceData.length; j++) {
+        var objLine = {
+          name: sourceData[j].series,
+          type: echart_type,
+          data: sourceData[j].data,
+        };
+        var objCustom = {
+          type: "custom",
+          itemStyle: {
+            normal: {
+              borderWidth: 1.5,
+              borderType: "dotted",
+            },
+          },
+          z: 100,
+        };
+
+        series.push(objLine);
+        series.push(objCustom);
+      }
+
+      return series;
+    },
+    getSeriesNames(sourceData) {
+      var s_names = [];
+      for (var i = 0; i < sourceData.length; i++) {
+        s_names[i] = sourceData[i].series;
+      }
+      return s_names;
+    },
+    clean_data() {
+      this.stream_data.table_data = [];
+      this.stream_data.echart_data = [];
+
+      this.lmbench_data_a.table_data = [];
+      this.lmbench_data_a.echart_data = [];
+      this.lmbench_data_b.table_data = [];
+      this.lmbench_data_b.echart_data = [];
+      this.lmbench_data_c.table_data = [];
+      this.lmbench_data_c.echart_data = [];
+      this.lmbench_data_d.table_data = [];
+      this.lmbench_data_d.echart_data = [];
+      this.lmbench_data_e.table_data = [];
+      this.lmbench_data_e.echart_data = [];
+      this.lmbench_data_f.table_data = [];
+      this.lmbench_data_f.echart_data = [];
+
+      this.libmicro_data.table_data = [];
+      this.libmicro_data.echart_data = [];
+
+      this.unixbench_data.table_data = [];
+      this.unixbench_data.echart_data = [];
+
+      this.fio_data.table_data = [];
+      this.fio_data.echart_data = [];
+      this.fio_data_b.table_data = [];
+      this.fio_data_b.echart_data = [];
+      this.fio_data_c.table_data = [];
+      this.fio_data_c.echart_data = [];
+
+      this.netperfa_data.table_data = [];
+      this.netperfa_data.echart_data = [];
+
+      this.netperfb_data.table_data = [];
+      this.netperfb_data.echart_data = [];
+    },
+    getTableData(sData, table_data) {
+      var avg_data = sData.datas.average;
+      var change_data = sData.datas.change;
+      var tData = [];
+      var tHeader = [];
+      var title_trans = this.title_dic[sData.title] || sData.title;
+
+      if (title_trans == "netperf-Throughput_Mbps") {
+        if (sData.test_params.includes("TCP")) {
+          title_trans = "TCP_STREAM_MESSAGE_SIZE";
+        } else {
+          title_trans = "UDP_STREAM_MESSAGE_SIZE";
+        }
+      }
+      if (title_trans == "unixbench-score") {
+        if (sData.test_params.includes("96")) {
+          title_trans = "Index_Values_96core";
+        } else {
+          title_trans = "Index_Values_1core";
+        }
+      }
+
+      tHeader.push(title_trans);
+      tHeader = tHeader.concat(avg_data[0].x_params);
+      for (var i = 0; i < avg_data.length; i++) {
+        var tmp = this.getRowData(title_trans, avg_data[i]);
+        tData.push(tmp);
+      }
+
+      for (i = 0; i < change_data.length; i++) {
+        tmp = this.getRowData(title_trans, change_data[i]);
+        tData.push(tmp);
+      }
+      table_data.push({
+        header: tHeader,
+        data: tData,
+        title: sData.title,
+        test_params: sData.test_params,
+        testbox: sData.testbox,
+      });
+    },
+    getRowData(title, data) {
+      var tmp = {};
+      tmp[title] = data.series;
+
+      if (data.series.includes("vs")) {
+        if (this.improve_percent[data.series] == null) {
+          this.improve_percent[data.series] = { total: 0, num: 0, percent:0 };
+        }
+        for (var i = 0; i < data.x_params.length; i++) {
+          tmp[data.x_params[i]] = data.data[i] + "%";
+          this.improve_percent[data.series].total += data.data[i];
+          this.improve_percent[data.series].num += 1;
+        }
+        this.improve_percent[data.series].percent = this.improve_percent[data.series].total / this.improve_percent[data.series].num;
+        this.table_improve = [{"compare_versions": data.series, "improvement": this.improve_percent[data.series].percent.toFixed(4) + "%"}];
+        this.im_show = true;
+      } else {
+        for (i = 0; i < data.x_params.length; i++) {
+          tmp[data.x_params[i]] = data.data[i];
+        }
+      }
+      return tmp;
+    },
+    trans_x(datas) {
+      var avg_data = datas.average;
+      var change_data = datas.change;
+      var tHeader = avg_data[0].x_params;
+
+      for (var i = 0; i < tHeader.length; i++) {
+        tHeader[i] = this.title_dic[tHeader[i]] || tHeader[i];
+        if (tHeader[i].includes("libmicro")) {
+          tHeader[i] = tHeader[i].replace("libmicro-", "");
+        }
+      }
+
+      for (i = 0; i < avg_data.length; i++) {
+        avg_data[i].x_params = tHeader;
+      }
+      for (i = 0; i < change_data.length; i++) {
+        change_data[i].x_params = tHeader;
+      }
+      datas.average = avg_data;
+      datas.change = change_data;
+
+      return datas;
+    },
+    transfer_res(res) {
+      var destination = {};
+      destination = res;
+
+      for (var i = 0; i < destination.length; i++) {
+        destination[i].datas = this.trans_x(destination[i].datas);
+      }
+      return destination;
+    },
+    getData(JobData) {
+      getPerformanceResult(JobData.QueryData).then((res) => {
+        JobData.echart_data = this.transfer_res(res);
+        var sourceData = JobData.echart_data;
+
+        for (var i = 0; i < sourceData.length; i++) {
+          this.getTableData(sourceData[i], JobData.table_data);
+        }
+        this.sleep(2000).then(() => {
+          this.get_Echarts(JobData.echart_data);
+        });
+      });
+    },
+    getTableHeaders() {
+      if (this.suite == "stream") {
+        this.t_headers = ["copy", "scale", "add", "triad"];
+        this.stream_selected = this.t_headers;
+      } else if (this.suite == "netperf") {
+        this.t_headers = [
+          "TCP_RR",
+          "TCP_CRR",
+          "UDP_RR",
+          "1",
+          "64",
+          "128",
+          "256",
+          "512",
+          "1024",
+          "1500",
+          "2048",
+          "4096",
+          "9000",
+          "16384",
+          "32768",
+          "65536",
+        ];
+        this.netperf_selected = this.t_headers;
+      } else if (this.suite == "unixbench") {
+        this.t_headers = [
+          "Double-Precision_Whetstone",
+          "Shell_Scripts_(1_concurrent)",
+          "Shell_Scripts_(8_concurrent)",
+          "Pipe_Throughput",
+          "Pipe-based_Context_Switching",
+          "Process_Creation",
+          "System_Call_Overhead",
+          "Dhrystone_2_using_register_variables",
+          "File_Copy_1024_bufsize_2000_maxblocks",
+          "File_Copy_256_bufsize_500_maxblocks",
+          "File_Copy_4096_bufsize_8000_maxblocks",
+          "Execl_Throughput",
+          "System_Benchmarks_Index_Score",
+        ];
+        this.unixbench_selected = this.t_headers;
+      } else if (this.suite == "lmbench3") {
+        this.t_headers = [
+          "null_call",
+          "null_io",
+          "stat",
+          "open_close",
+          "slct_TCP",
+          "sig_inst",
+          "sig_hndl",
+          "fork_proc",
+          "exec_proc",
+          "sh_proc",
+          "Pipe",
+          "AF_UNIX",
+          "UDP",
+          "TCP",
+          "TCP_conn",
+          "File_reread",
+          "Mmap_reread",
+          "copy(libc)",
+          "copy(hand)",
+          "Mem_read",
+          "Mem_write",
+          "2p/0K",
+          "2p/16K",
+          "2p/64K",
+          "8p/16K",
+          "8p/64K",
+          "16p/16K",
+          "16p/64K",
+          "Mmap_Latency",
+          "Prot_Fault",
+          "Page_Fault",
+          "100fd_selct",
+          "L1_$",
+          "L2_$",
+          "Main_mem",
+          "Rand_mem",
+        ];
+        this.lmbench3_selected = this.t_headers;
+      } else if (this.suite == "fio-basic") {
+        this.t_headers = [
+          "4k",
+          "16k",
+          "32k",
+          "64k",
+          "128k",
+          "256k",
+          "512k",
+          "1024k",
+        ];
+        this.fio_selected = this.t_headers;
+      } else if (this.suite == "libmicro") {
+        this.t_headers = [
+          "getpid",
+          "getenv",
+          "getenvT2",
+          "gettimeofday",
+          "log",
+          "exp",
+          "lrand48",
+          "memset_10",
+          "memset_256",
+          "memset_256_u",
+          "memset_1k",
+          "memset_4k",
+          "memset_4k_uc",
+          "memset_10k",
+          "memset_1m",
+          "memset_10m",
+          "memsetP2_10m",
+          "memrand",
+          "isatty_yes",
+          "isatty_no",
+          "malloc_10",
+          "malloc_100",
+          "malloc_1k",
+          "malloc_10k",
+          "malloc_100k",
+          "mallocT2_10",
+          "mallocT2_100",
+          "mallocT2_1k",
+          "mallocT2_10k",
+          "mallocT2_100k",
+          "close_bad",
+          "close_tmp",
+          "close_usr",
+          "close_zero",
+          "memcpy_10",
+          "memcpy_1k",
+          "memcpy_10k",
+          "memcpy_1m",
+          "memcpy_10m",
+          "strcpy_10",
+          "strchr_1k",
+          "strcmp_10",
+          "strcmp_1k",
+          "scasecmp_10",
+          "scasecmp_1k",
+          "strtol",
+          "getcontext",
+          "setcontext",
+          "mutex_st",
+          "mutex_mt",
+          "mutex_T2",
+          "longjmp",
+          "siglongjmp",
+          "getrusage",
+          "times",
+          "time",
+          "localtime_r",
+          "strftime",
+          "mktime",
+          "mktimeT2",
+          "c_mutex_1",
+          "c_mutex_10",
+          "c_mutex_200",
+          "c_cond_1",
+          "c_cond_10",
+          "c_cond_200",
+          "c_lockf_1",
+          "c_lockf_10",
+          "c_lockf_200",
+          "c_flock",
+          "c_flock_10",
+          "c_flock_200",
+          "c_fcntl_1",
+          "c_fcntl_10",
+          "c_fcntl_200",
+          "file_lock",
+          "getsockname",
+          "getpeername",
+          "chdir_tmp",
+          "chdir_usr",
+          "chgetwd_tmp",
+          "chgetwd_usr",
+          "realpath_tmp",
+          "realpath_usr",
+          "stat_tmp",
+          "stat_usr",
+          "fcntl_tmp",
+          "fcntl_usr",
+          "fcntl_ndelay",
+          "lseek_t8k",
+          "lseek_u8k",
+          "open_tmp",
+          "open_usr",
+          "open_zero",
+          "dup",
+          "socket_u",
+          "socket_i",
+          "socketpair",
+          "setsockopt",
+          "bind",
+          "listen",
+          "connection",
+          "poll_10",
+          "poll_100",
+          "poll_1000",
+          "poll_w10",
+          "poll_w100",
+          "poll_w1000",
+          "select_10",
+          "select_100",
+          "select_1000",
+          "select_w10",
+          "select_w100",
+          "select_w1000",
+          "semop",
+          "sigaction",
+          "signal",
+          "sigprocmask",
+          "pthread_8",
+          "pthread_32",
+          "pthread_128",
+          "pthread_512",
+          "fork_10",
+          "fork_100",
+          "fork_1000",
+          "exit_10",
+          "exit_100",
+          "exit_1000",
+          "exit_10_nolibc",
+          "exec",
+          "system",
+          "recurse",
+          "read_t1k",
+          "read_t10k",
+          "read_t100k",
+          "read_u1k",
+          "read_u10k",
+          "read_u100k",
+          "read_z1k",
+          "read_z10k",
+          "read_z100k",
+          "read_zw100k",
+          "write_t1k",
+          "write_t10k",
+          "write_t100k",
+          "write_u1k",
+          "write_u10k",
+          "write_u100k",
+          "write_n1k",
+          "write_n10k",
+          "write_n100k",
+          "writev_t1k",
+          "writev_t10k",
+          "writev_t100k",
+          "writev_u1k",
+          "writev_u10k",
+          "writev_u100k",
+          "writev_n1k",
+          "writev_n10k",
+          "writev_n100k",
+          "pread_t1k",
+          "pread_t10k",
+          "pread_t100k",
+          "pread_u1k",
+          "pread_u10k",
+          "pread_u100k",
+          "pread_z1k",
+          "pread_z10k",
+          "pread_z100k",
+          "pread_zw100k",
+          "pwrite_t1k",
+          "pwrite_t10k",
+          "pwrite_t100k",
+          "pwrite_u1k",
+          "pwrite_u10k",
+          "pwrite_u100k",
+          "pwrite_n1k",
+          "pwrite_n10k",
+          "pwrite_n100k",
+          "mmap_z8k",
+          "mmap_z128k",
+          "mmap_t8k",
+          "mmap_t128k",
+          "mmap_u8k",
+          "mmap_u128k",
+          "mmap_a8k",
+          "mmap_a128k",
+          "mmap_rz8k",
+          "mmap_rz128k",
+          "mmap_rt8k",
+          "mmap_rt128k",
+          "mmap_ru8k",
+          "mmap_ru128k",
+          "mmap_ra8k",
+          "mmap_ra128k",
+          "mmap_wz8k",
+          "mmap_wz128k",
+          "mmap_wt8k",
+          "mmap_wt128k",
+          "mmap_wu8k",
+          "mmap_wu128k",
+          "mmap_wa8k",
+          "mmap_wa128k",
+          "unmap_z8k",
+          "unmap_z128k",
+          "unmap_t8k",
+          "unmap_t128k",
+          "unmap_u8k",
+          "unmap_u128k",
+          "unmap_a8k",
+          "unmap_a128k",
+          "unmap_rz8k",
+          "unmap_rz128k",
+          "unmap_rt8k",
+          "unmap_rt128k",
+          "unmap_ru8k",
+          "unmap_ru128k",
+          "unmap_ra8k",
+          "unmap_ra128k",
+          "conn_connect",
+          "unmap_wz8k",
+          "unmap_wz128k",
+          "unmap_wt8k",
+          "unmap_wt128k",
+          "unmap_wu8k",
+          "unmap_wu128k",
+          "unmap_wa8k",
+          "unmap_wa128k",
+          "mprot_z8k",
+          "mprot_z128k",
+          "mprot_wz8k",
+          "mprot_wz128k",
+          "mprot_twz8k",
+          "mprot_tw128k",
+          "mprot_tw4m",
+          "pipe_pst1",
+          "pipe_pmt1",
+          "pipe_pmp1",
+          "pipe_pst4k",
+          "pipe_pmt4k",
+          "pipe_pmp4k",
+          "pipe_sst1",
+          "pipe_smt1",
+          "pipe_smp1",
+          "pipe_sst4k",
+          "pipe_smt4k",
+          "pipe_smp4k",
+          "pipe_tst1",
+          "pipe_tmt1",
+          "pipe_tmp1",
+          "pipe_tst4k",
+          "pipe_tmt4k",
+          "pipe_tmp4k",
+          "conn_accept",
+          "close_tcp",
+        ];
+        this.libmicro_selected = this.t_headers;
+      }
+    },
+    radioChange() {
+      this.getosData();
+      this.getSelectVersiona(this.os_a);
+      this.getSelectVersionb(this.os_b);
+      this.getSelectGroupa(this.os_version_a);
+      this.getSelectGroupb(this.os_version_b);
+      this.getTableHeaders();
+      this.getTransferData();
+      this.improve_percent = {};
+      this.table_improve = [];
+      this.im_show = false;
+      for (var index = 0; index < this.compare_object.length; index++) {
+        this.getSelectVersion(index, this.compare_object[index].os);
+        this.getSelectGroup(index, this.compare_object[index].os_version);
+      }
+    },
+    getosData() {
+      this.checkQuery.filter.suite = [this.suite];
+      this.checkQuery.filter.os = [];
+      this.checkQuery.filter.os_version = [];
+      this.checkQuery.field = "os";
+      this.group_id_a = "";
+      this.versionData_a = [];
+      this.groupData_a = [];
+
+      this.checkQuery_b.filter.suite = [this.suite];
+      this.checkQuery_b.filter.os = [];
+      this.checkQuery_b.filter.os_version = [];
+      this.checkQuery_b.field = "os";
+      this.group_id_b = "";
+      this.versionData_b = [];
+      this.groupData_b = [];
+
+      QueryField(this.checkQuery).then((res) => {
+        this.osData = res;
+      });
+    },
+    selectChangeVersiona(os) {
+      this.os_version_a = "";
+      this.getSelectVersiona(os);
+    },
+    selectChangeVersionb(os) {
+      this.os_version_b = "";
+      this.getSelectVersionb(os);
+    },
+    selectChangeVersion(index, os) {
+      this.compare_object[index].os_version = "";
+      this.getSelectVersion(index, os);
+    },
+    getSelectVersion(index, os) {
+      this.compare_object[index].group_id = "";
+      this.compare_object[index].versionData = [];
+      this.compare_object[index].groupData = [];
+      var checkQuery = this.compare_object[index].checkQuery;
+
+      checkQuery.filter.suite = [this.suite];
+      checkQuery.filter.os = [os];
+      checkQuery.filter.os_version = [];
+      checkQuery.field = "os_version";
+      QueryField(checkQuery).then((res) => {
+        this.compare_object[index].versionData = res;
+      });
+    },
+    getSelectVersiona(os) {
+      this.checkQuery.filter.os = [os];
+      this.checkQuery.filter.os_version = [];
+      this.checkQuery.field = "os_version";
+      this.group_id_a = "";
+      this.versionData_a = [];
+      this.groupData_a = [];
+
+      QueryField(this.checkQuery).then((res) => {
+        this.versionData_a = res;
+      });
+    },
+    getSelectVersionb(os) {
+      this.checkQuery_b.filter.os = [os];
+      this.checkQuery_b.filter.os_version = [];
+      this.checkQuery_b.field = "os_version";
+      this.group_id_b = "";
+      this.versionData_b = [];
+      this.groupData_b = [];
+
+      QueryField(this.checkQuery_b).then((res) => {
+        this.versionData_b = res;
+      });
+    },
+    getSelectGroupa(os_version) {
+      this.checkQuery.filter.os_version = [os_version];
+      this.checkQuery.field = "group_id";
+      this.group_id_a = "";
+
+      QueryField(this.checkQuery).then((res) => {
+        this.groupData_a = res;
+      });
+    },
+    getSelectGroupb(os_version) {
+      this.checkQuery_b.filter.os_version = [os_version];
+      this.checkQuery_b.field = "group_id";
+      this.group_id_b = "";
+
+      QueryField(this.checkQuery_b).then((res) => {
+        this.groupData_b = res;
+      });
+    },
+    getSelectGroup(index, os_version) {
+      this.compare_object[index].group_id = "";
+      this.compare_object[index].groupData = [];
+      var checkQuery = this.compare_object[index].checkQuery;
+
+      checkQuery.filter.suite = [this.suite];
+      checkQuery.filter.os_version = [os_version];
+      checkQuery.field = "group_id";
+      QueryField(checkQuery).then((res) => {
+        this.compare_object[index].groupData = res;
+      });
+    },
+    sleep(time) {
+      return new Promise((resolve) => setTimeout(resolve, time));
+    },
+    get_Echarts(echart_data) {
+      for (var i = 0; i < echart_data.length; i++) {
+        this.getEchart(i, echart_data);
+      }
+    },
+    getEchart(index, echart_data) {
+      this.sleep(200 * index).then(() => {
+        var echart_title = echart_data[index].title;
+        var echart_params = echart_data[index].test_params;
+
+        this.drawEchart(
+          echart_title,
+          echart_params,
+          index,
+          "average",
+          "line",
+          echart_data[index].datas.average
+        );
+
+        this.drawEchart(
+          echart_title,
+          echart_params,
+          index,
+          "change",
+          "bar",
+          echart_data[index].datas.change
+        );
+      });
+    },
+    drawEchart(
+      echart_title,
+      echart_params,
+      index,
+      data_type,
+      echart_type,
+      e_data
+    ) {
+      var echart_id =
+        data_type +
+        "_" +
+        echart_title.replace(".", "_") +
+        "_" +
+        index +
+        "_" +
+        echart_params.replace(/\.|\s/g, "_");
+      var myChart = echarts.init(document.getElementById(echart_id));
+
+      if (e_data.length == 0) {
+        return;
+      }
+
+      var option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+
+          formatter(params) {
+            var res = "<p>x_value: " + params[0].name + "</p>";
+            var s_name;
+            var average;
+            var tmp;
+
+            for (var i = 0; i < params.length; i++) {
+              s_name = "<p>" + params[i].seriesName + "</p>";
+              tmp = params[i].data;
+              if (s_name.includes("vs")) {
+                tmp = tmp + "%";
+              }
+              average = "<p>" + data_type + ":" + tmp + "</p>";
+              res += "</br>" + s_name + average;
+            }
+            return res;
+          },
+        },
+        title: {
+          text: echart_title,
+        },
+        legend: {
+          data: this.getSeriesNames(e_data),
+        },
+        xAxis: {
+          data: e_data[0].x_params,
+          axisLabel: {
+            show: true,
+            //            interval: 0,
+            rotate: 40,
+            textStyle: {
+              color: "#333",
+            },
+          },
+        },
+        yAxis: {
+          axisLabel: {
+            formatter: this.y_formatter(e_data),
+            textStyle: {
+              color: "#333",
+            },
+          },
+        },
+
+        grid: {
+          left: "15%",
+        },
+      };
+      var series = this.renderSeries(e_data, echart_type);
+      option.series = series;
+      option && myChart.setOption(option, true); //绘图
+    },
+    y_formatter(e_data) {
+      var SeriesNames = this.getSeriesNames(e_data);
+      if (SeriesNames[0].includes("vs")) {
+        return "{value}%";
+      }
+    },
+    groupIdEmpty() {
+      for (var i = 0; i < this.compare_object.length; i++) {
+        if (this.compare_object[i].group_id == "") {
+          return true;
+        }
+      }
+      return false;
+    },
+    queryCharts() {
+      var series = [
+        { os: this.os_a, os_version: this.os_version_a },
+        { os: this.os_b, os_version: this.os_version_b },
+      ];
+      for (var i = 0; i < this.compare_object.length; i++) {
+        var every_set = {
+          os: this.compare_object[i].os,
+          os_version: this.compare_object[i].os_version,
+        };
+        series.push(every_set);
+      }
+      this.lmbench_data_a.QueryData.series = series;
+      this.lmbench_data_b.QueryData.series = series;
+      this.lmbench_data_c.QueryData.series = series;
+      this.lmbench_data_d.QueryData.series = series;
+      this.lmbench_data_e.QueryData.series = series;
+      this.lmbench_data_f.QueryData.series = series;
+
+      this.unixbench_data.QueryData.series = series;
+
+      this.libmicro_data.QueryData.series = series;
+
+      this.stream_data.QueryData.series = series;
+
+      this.netperfa_data.QueryData.series = series;
+      this.netperfb_data.QueryData.series = series;
+
+      this.fio_data.QueryData.series = series;
+      this.fio_data_b.QueryData.series = series;
+      this.fio_data_c.QueryData.series = series;
+
+      if (
+        this.group_id_a == "" ||
+        this.group_id_b == "" ||
+        this.groupIdEmpty()
+      ) {
+        this.lmbench_data_a.QueryData.filter.group_id = [];
+        this.lmbench_data_b.QueryData.filter.group_id = [];
+        this.lmbench_data_c.QueryData.filter.group_id = [];
+        this.lmbench_data_d.QueryData.filter.group_id = [];
+        this.lmbench_data_e.QueryData.filter.group_id = [];
+        this.lmbench_data_f.QueryData.filter.group_id = [];
+        this.unixbench_data.QueryData.filter.group_id = [];
+        this.libmicro_data.QueryData.filter.group_id = [];
+        this.stream_data.QueryData.filter.group_id = [];
+        this.netperfa_data.QueryData.filter.group_id = [];
+        this.netperfb_data.QueryData.filter.group_id = [];
+        this.fio_data.QueryData.filter.group_id = [];
+        this.fio_data_b.QueryData.filter.group_id = [];
+        this.fio_data_c.QueryData.filter.group_id = [];
+      } else {
+        var group_ids = [this.group_id_a, this.group_id_b];
+        for (i = 0; i < this.compare_object.length; i++) {
+          var every_group_id = this.compare_object[i].group_id;
+          if (every_group_id != "") {
+            group_ids.push(every_group_id);
+          }
+        }
+        this.lmbench_data_a.QueryData.filter.group_id = group_ids;
+        this.lmbench_data_b.QueryData.filter.group_id = group_ids;
+        this.lmbench_data_c.QueryData.filter.group_id = group_ids;
+        this.lmbench_data_d.QueryData.filter.group_id = group_ids;
+        this.lmbench_data_e.QueryData.filter.group_id = group_ids;
+        this.lmbench_data_f.QueryData.filter.group_id = group_ids;
+
+        this.unixbench_data.QueryData.filter.group_id = group_ids;
+        this.libmicro_data.QueryData.filter.group_id = group_ids;
+        this.stream_data.QueryData.filter.group_id = group_ids;
+        this.netperfa_data.QueryData.filter.group_id = group_ids;
+        this.netperfb_data.QueryData.filter.group_id = group_ids;
+
+        this.fio_data.QueryData.filter.group_id = group_ids;
+        this.fio_data_b.QueryData.filter.group_id = group_ids;
+        this.fio_data_c.QueryData.filter.group_id = group_ids;
+      }
+
+      this.clean_data();
+      if (this.suite === "lmbench3") {
+        this.getData(this.lmbench_data_a);
+        this.sleep(100).then(() => {
+          this.getData(this.lmbench_data_b);
+        });
+        this.sleep(200).then(() => {
+          this.getData(this.lmbench_data_c);
+        });
+        this.sleep(300).then(() => {
+          this.getData(this.lmbench_data_d);
+        });
+        this.sleep(1000).then(() => {
+          this.getData(this.lmbench_data_e);
+        });
+        this.sleep(1900).then(() => {
+          this.getData(this.lmbench_data_f);
+        });
+      }
+      if (this.suite === "unixbench") {
+        this.getData(this.unixbench_data);
+      }
+      if (this.suite === "libmicro") {
+        this.getData(this.libmicro_data);
+      }
+      if (this.suite === "stream") {
+        this.getData(this.stream_data);
+      }
+      if (this.suite === "fio-basic") {
+        this.getData(this.fio_data);
+        this.sleep(200).then(() => {
+          this.getData(this.fio_data_b);
+        });
+        this.sleep(400).then(() => {
+          this.getData(this.fio_data_c);
+        });
+      }
+      if (this.suite === "netperf") {
+        this.getData(this.netperfb_data);
+
+        this.sleep(200).then(() => {
+          this.getData(this.netperfa_data);
+        });
+      }
+    },
+    tableRowStyle({ rowIndex }) {
+      let rowBackground = {};
+      if (rowIndex === 0) {
+        rowBackground.background = "#eeeeee";
+      }
+      return rowBackground;
+    },
+    tableCellStyle({ row, column }) {
+      let cellBackground = { color: "#000" };
+
+      for (var k in row) {
+        if (typeof row[k] == "string" && row[k].includes("vs")) {
+          var content = row[column.label];
+          if (typeof content == "string") {
+            if (content.includes("vs")) {
+              cellBackground.background = "yellow";
+              return cellBackground;
+            } else if (content.replace("%", "") > 0) {
+              cellBackground.background = "green";
+              return cellBackground;
+            } else if (content.replace("%", "") < 0) {
+              cellBackground.background = "red";
+              return cellBackground;
+            }
+          }
+        }
+      }
+      return cellBackground;
+    },
+    setStyle(worksheet) {
+      worksheet["!cols"] = [{ wpx: 300 }];
+
+      for (var k in worksheet) {
+        if (k.includes("!") || worksheet[k].v === "") {
+          continue;
+        }
+        worksheet[k].s = {
+          border: {
+            top: {
+              style: "thin",
+            },
+            bottom: {
+              style: "thin",
+            },
+            left: {
+              style: "thin",
+            },
+            right: {
+              style: "thin",
+            },
+          },
+        };
+        if (k.includes("1")) {
+          worksheet[k].s.alignment = {
+            horizontal: "center",
+            vertical: "center",
+            wrapText: true,
+          };
+          worksheet[k].s.fill = {
+            bgColor: {
+              indexed: 64,
+            },
+            fgColor: {
+              rgb: "92d050",
+            },
+          };
+        }
+        if (worksheet[k]["t"] == "s" && worksheet[k]["v"].includes("vs")) {
+          worksheet[k].s.alignment = {
+            wrapText: true,
+          };
+          worksheet[k].s.fill = {
+            bgColor: {
+              indexed: 64,
+            },
+            fgColor: {
+              rgb: "FFFF00",
+            },
+          };
+        } else {
+          var col_head = "A" + k.replace(/[A-Z]{1,}/, "");
+          if (worksheet[col_head].v.includes("vs")) {
+            worksheet[k].z = "0.00%";
+            if (worksheet[k].v > 0.1) {
+              worksheet[k].s.fill = {
+                bgColor: {
+                  indexed: 64,
+                },
+                fgColor: {
+                  rgb: "00B050",
+                },
+              };
+            }
+            if (worksheet[k].v < -0.1) {
+              worksheet[k].s.fill = {
+                bgColor: {
+                  indexed: 64,
+                },
+                fgColor: {
+                  rgb: "FF0000",
+                },
+              };
+            }
+          }
+        }
+      }
+    },
+    getExcel() {
+      var c_children = document.getElementById("container").children;
+      let wb = XLSX.utils.book_new();
+      var used_name = {};
+
+      if (c_children.length < 2) {
+        this.$message("导出失败");
+        return;
+      }
+
+      for (var i = 2; i < c_children.length; i++) {
+        var el_table = c_children[i].children[2];
+        let sheet = XLSX.utils.table_to_sheet(el_table);
+        this.setStyle(sheet);
+        var sheet_name = sheet["A1"].v;
+        if (sheet_name == "Function") sheet_name = this.suite;
+        if (used_name[sheet_name] == null) {
+          used_name[sheet_name] = 1;
+        } else {
+          used_name[sheet_name]++;
+        }
+        if (used_name[sheet_name] > 1) {
+          sheet_name = sheet_name + (used_name[sheet_name] - 1);
+        }
+        XLSX.utils.book_append_sheet(wb, sheet, sheet_name);
+      }
+      let wbout = XLSXS.write(wb, {
+        book_Type: "xlsx",
+        bookSST: false,
+        type: "binary",
+      });
+      filesaver.saveAs(
+        new Blob([this.s2ab(wbout)], { type: "application/octet-stream" }),
+        "测试数据.xlsx"
+      );
+    },
+    s2ab(s) {
+      let buf = null;
+
+      if (typeof ArrayBuffer !== "undefined") {
+        buf = new ArrayBuffer(s.length);
+        let view = new Uint8Array(buf);
+
+        for (let i = 0; i != s.length; ++i) {
+          view[i] = s.charCodeAt(i) & 0xff;
+        }
+
+        return buf;
+      }
+
+      buf = new Array(s.length);
+
+      for (let i = 0; i != s.length; ++i) {
+        buf[i] = s.charCodeAt(i) & 0xff;
+      }
+
+      return buf;
+    },
+    stream_filter(s_headers) {
+      var checkedHeaders;
+      checkedHeaders = this.stream_selected;
+      var headers = [];
+      headers.push(s_headers[0]);
+
+      var tmp = checkedHeaders.filter(function (v) {
+        return s_headers.indexOf(v) > -1;
+      });
+      headers = headers.concat(tmp);
+      return headers;
+    },
+    netperf_filter(s_headers) {
+      var checkedHeaders;
+      checkedHeaders = this.netperf_selected;
+      var headers = [];
+      headers.push(s_headers[0]);
+
+      var tmp = checkedHeaders.filter(function (v) {
+        return s_headers.indexOf(v) > -1;
+      });
+      headers = headers.concat(tmp);
+      return headers;
+    },
+    unixbench_filter(s_headers) {
+      var checkedHeaders;
+      checkedHeaders = this.unixbench_selected;
+      var headers = [];
+      headers.push(s_headers[0]);
+
+      var tmp = checkedHeaders.filter(function (v) {
+        return s_headers.indexOf(v) > -1;
+      });
+      headers = headers.concat(tmp);
+      return headers;
+    },
+    lmbench3_filter(s_headers) {
+      var checkedHeaders;
+      checkedHeaders = this.lmbench3_selected;
+      var headers = [];
+      headers.push(s_headers[0]);
+
+      var tmp = checkedHeaders.filter(function (v) {
+        return s_headers.indexOf(v) > -1;
+      });
+      headers = headers.concat(tmp);
+      return headers;
+    },
+    libmicro_filter(s_headers) {
+      var checkedHeaders;
+      checkedHeaders = this.libmicro_selected;
+      var headers = [];
+      headers.push(s_headers[0]);
+
+      var tmp = checkedHeaders.filter(function (v) {
+        return s_headers.indexOf(v) > -1;
+      });
+      headers = headers.concat(tmp);
+      return headers;
+    },
+    fio_filter(s_headers) {
+      var checkedHeaders;
+      checkedHeaders = this.fio_selected;
+      var headers = [];
+      headers.push(s_headers[0]);
+
+      var tmp = checkedHeaders.filter(function (v) {
+        return s_headers.indexOf(v) > -1;
+      });
+      headers = headers.concat(tmp);
+      return headers;
+    },
+    getTransferData() {
+      this.transfer_data = [];
+      this.transfer_chosen = [];
+      for (var i = 0; i < this.t_headers.length; i++) {
+        this.transfer_data.push({
+          key: i,
+          label: this.t_headers[i],
+        });
+        this.transfer_chosen.push(i);
+      }
+    },
+    transferChange() {
+      if (this.suite == "stream") {
+        this.stream_selected = [];
+        for (var i = 0; i < this.transfer_chosen.length; i++) {
+          var index = this.transfer_chosen[i];
+          this.stream_selected[i] = this.transfer_data[index].label;
+        }
+      } else if (this.suite == "netperf") {
+        this.netperf_selected = [];
+        for (i = 0; i < this.transfer_chosen.length; i++) {
+          index = this.transfer_chosen[i];
+          this.netperf_selected[i] = this.transfer_data[index].label;
+        }
+      } else if (this.suite == "unixbench") {
+        this.unixbench_selected = [];
+        for (i = 0; i < this.transfer_chosen.length; i++) {
+          index = this.transfer_chosen[i];
+          this.unixbench_selected[i] = this.transfer_data[index].label;
+        }
+      } else if (this.suite == "lmbench3") {
+        this.lmbench3_selected = [];
+        for (i = 0; i < this.transfer_chosen.length; i++) {
+          index = this.transfer_chosen[i];
+          this.lmbench3_selected[i] = this.transfer_data[index].label;
+        }
+      } else if (this.suite == "libmicro") {
+        this.libmicro_selected = [];
+        for (i = 0; i < this.transfer_chosen.length; i++) {
+          index = this.transfer_chosen[i];
+          this.libmicro_selected[i] = this.transfer_data[index].label;
+        }
+      } else if (this.suite == "fio-basic") {
+        this.fio_selected = [];
+        for (i = 0; i < this.transfer_chosen.length; i++) {
+          index = this.transfer_chosen[i];
+          this.fio_selected[i] = this.transfer_data[index].label;
+        }
+      }
+    },
+    addObject() {
+      var obj = {
+        os: "",
+        os_version: "",
+        group_id: "",
+        versionData: [],
+        groupData: [],
+        checkQuery: {
+          filter: {
+            suite: [this.suite],
+            os: [],
+            os_version: [],
+          },
+          field: "os",
+        },
+      };
+      this.compare_object.push(obj);
+    },
+    delObject() {
+      this.compare_object.pop();
+    },
+    getHostInfo(testbox) {
+      this.testbox = testbox;
+      getHostInfo({ testbox: testbox }).then((res) => {
+        this.textData = JSON.stringify(res, null, "\t");
+        this.dialogTableVisible = true;
+      });
+    },
+  },
+  mounted() {
+    this.getosData();
+    this.getTableHeaders();
+    this.getTransferData();
+  },
+};
+</script>
+
+<style lang='less' scoped>
+.input_class {
+  width: 85%;
+}
+.confirm {
+  float: left;
+  margin-left: 30%;
+}
+.containers {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 700px;
+}
+.chart {
+  width: 1000px;
+  height: 720px;
+  margin-bottom: 10px;
+}
+.test-params {
+  margin-left: 100px;
+  margin-bottom: 20px;
+}
+.el-table.warning-row {
+  background: #02851e;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/performanceresult/performanceresult.vue b/src/views/performanceresult/performanceresult.vue
new file mode 100644
index 0000000000000000000000000000000000000000..49949324d58996cd7802384e9198b1a54d34e329
--- /dev/null
+++ b/src/views/performanceresult/performanceresult.vue
@@ -0,0 +1,391 @@
+
+<template>
+  <div id="CustomErrorBar">
+    <Header class="main-header"></Header>
+    <h1 class="title">Performance Result</h1>
+    <div class="content">
+      <el-form :model="QueryData">
+        <el-form-item label="Filter" label-width="80px" class="input_class">
+          <el-input
+            v-model="filter"
+            placeholder="eg: suite:fio-basic;os_arch:aarch64,x86;"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="series" label-width="80px" class="input_class">
+          <el-input
+            v-model="series"
+            placeholder="eg: os:openeuler,os_version:20.03;os:debian,os_version:sid;"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="metrics" label-width="80px" class="input_class">
+          <el-input
+            v-model="metrics"
+            placeholder="eg: iperf.tcp.sender.dps"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="x_params" label-width="80px" class="input_class">
+          <el-input v-model="x_params" placeholder="eg: test_size"></el-input>
+        </el-form-item>
+
+        <el-form-item class="confirm">
+          <el-button @click="getTable">确定</el-button>
+        </el-form-item>
+        <el-form-item class="example">
+          <el-button @click="showExample">Example</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div id="container" class="containers">
+      <div v-for="(t_item, t_index) in table_data" :key="t_index">
+        <el-table :data="t_item.data" border style="width: 1500px">
+          <el-table-column
+            v-for="(item, index) in t_item.header"
+            :key="index"
+            :label="item"
+            :prop="item"
+          ></el-table-column>
+        </el-table>
+
+        <div
+          :id="`average_${t_item.title.replace('.', '_')}_${t_index}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${t_item.title.replace('.', '_')}_${t_index}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getPerformanceResult } from "@/api/jobs.js";
+import Header from "@/components/Header";
+import echarts from "echarts";
+export default {
+  name: "CustomErrorBar",
+  components: { Header },
+  data() {
+    return {
+      inputvalue: "",
+      filter: "",
+      series: "",
+      metrics: "",
+      x_params: "",
+      QueryData: {
+        filter: {},
+        metrics: [],
+        series: [],
+        x_params: [],
+      },
+      table_data: [],
+      echart_data: [],
+    };
+  },
+  methods: {
+    getQueryData() {
+      var tmp = this.filter.split(" ").join("").split(";");
+      var tmp1;
+      var tmp2;
+      this.QueryData.filter = {};
+      for (var i = 0; i < tmp.length; i++) {
+        if (tmp[i] == "") continue;
+
+        tmp1 = tmp[i].split(":");
+        this.QueryData.filter[tmp1[0]] = [];
+        tmp2 = tmp1[1].split(",");
+
+        for (var j = 0; j < tmp2.length; j++) {
+          this.QueryData.filter[tmp1[0]][j] = tmp2[j];
+        }
+      }
+
+      if (this.metrics == "") {
+        this.QueryData.metrics = [];
+      } else {
+        this.QueryData.metrics = this.metrics.split(" ").join("").split(";");
+      }
+      this.QueryData.x_params = this.x_params.split(" ").join("").split(";");
+
+      tmp = this.series.split(" ").join("").split(";");
+      this.QueryData.series = [];
+      for (i = 0; i < tmp.length; i++) {
+        if (tmp[i] == "") continue;
+
+        this.QueryData.series[i] = {};
+        tmp1 = tmp[i].split(",");
+        for (j = 0; j < tmp1.length; j++) {
+          tmp2 = tmp1[j].split(":");
+          this.QueryData.series[i][tmp2[0]] = tmp2[1];
+        }
+      }
+    },
+    renderDeviationAreaArray(dataArray, deviationArray) {
+      //用于生成方差区域的数组
+      var deviationAreaArray = [];
+      var len = dataArray.length;
+      for (var i = 0; i < len; i++) {
+        deviationAreaArray.push([
+          i,
+          dataArray[i] + (dataArray[i] * deviationArray[i]) / 100,
+          dataArray[i] - (dataArray[i] * deviationArray[i]) / 100,
+        ]); //[x坐标序号,最大值，最小值]
+      }
+      return deviationAreaArray;
+    },
+    renderItem(_params, api) {
+      //生成描绘方差图所需的参数
+      var xValue = api.value(0);
+      var highPoint = api.coord([xValue, api.value(1)]);
+      var lowPoint = api.coord([xValue, api.value(2)]);
+      var halfWidth = api.size([1, 0])[0] * 0.1;
+      var style = api.style({
+        stroke: api.visual("color"),
+        fill: null,
+      });
+
+      return {
+        type: "group",
+        children: [
+          {
+            type: "line",
+            transition: ["shape"],
+            shape: {
+              x1: highPoint[0] - halfWidth,
+              y1: highPoint[1],
+              x2: highPoint[0] + halfWidth,
+              y2: highPoint[1],
+            },
+            style: style,
+          },
+          {
+            type: "line",
+            transition: ["shape"],
+            shape: {
+              x1: highPoint[0],
+              y1: highPoint[1],
+              x2: lowPoint[0],
+              y2: lowPoint[1],
+            },
+            style: style,
+          },
+          {
+            type: "line",
+            transition: ["shape"],
+            shape: {
+              x1: lowPoint[0] - halfWidth,
+              y1: lowPoint[1],
+              x2: lowPoint[0] + halfWidth,
+              y2: lowPoint[1],
+            },
+            style: style,
+          },
+        ],
+      };
+    },
+    renderSeries(sourceData, echart_type) {
+      //描绘折线图+方差图所需的参数
+      var series = [];
+      for (var j = 0; j < sourceData.length; j++) {
+        var objLine = {
+          name: sourceData[j].series,
+          type: echart_type,
+          data: sourceData[j].data,
+        };
+        var objCustom = {
+          type: "custom",
+          itemStyle: {
+            normal: {
+              borderWidth: 1.5,
+              borderType: "dotted",
+            },
+          },
+          z: 100,
+        };
+
+        series.push(objLine);
+        series.push(objCustom);
+      }
+
+      return series;
+    },
+    getSeriesNames(sourceData) {
+      var s_names = [];
+      for (var i = 0; i < sourceData.length; i++) {
+        s_names[i] = sourceData[i].series;
+      }
+      return s_names;
+    },
+    echart_clean() {
+      var container = document.getElementById("container");
+      for (var i = container.children.length - 1; i >= 0; i--) {
+        container.removeChild(container.children[i]);
+      }
+      this.table_data = [];
+    },
+    getTableData(sData) {
+      var avg_data = sData.datas.average;
+      var change_data = sData.datas.change;
+      var tData = [];
+      var tHeader = [];
+
+      tHeader.push(sData.title);
+      tHeader = tHeader.concat(avg_data[0].x_params);
+      for (var i = 0; i < avg_data.length; i++) {
+        var tmp = this.getRowData(sData.title, avg_data[i]);
+        tData.push(tmp);
+      }
+
+      for (i = 0; i < change_data.length; i++) {
+        tmp = this.getRowData(sData.title, change_data[i]);
+        tData.push(tmp);
+      }
+      this.table_data.push({
+        header: tHeader,
+        data: tData,
+        title: sData.title,
+      });
+    },
+    getRowData(title, data) {
+      var tmp = {};
+      tmp[title] = data.series;
+
+      for (var i = 0; i < data.x_params.length; i++) {
+        tmp[data.x_params[i]] = data.data[i];
+      }
+      return tmp;
+    },
+    getTable() {
+      this.getQueryData();
+      if (this.QueryData) {
+        getPerformanceResult(this.QueryData).then((res) => {
+          this.echart_data = res;
+          var sourceData = res;
+
+          for (var i = 0; i < sourceData.length; i++) {
+            this.getTableData(sourceData[i]);
+          }
+          this.sleep(100).then(() => {
+            this.get_Echarts();
+          });
+        });
+      }
+    },
+    sleep(time) {
+      return new Promise((resolve) => setTimeout(resolve, time));
+    },
+    get_Echarts() {
+      for (var i = 0; i < this.echart_data.length; i++) {
+        var echart_title = this.echart_data[i].title;
+
+        this.drawEchart(
+          echart_title,
+          i,
+          "average",
+          "line",
+          this.echart_data[i].datas.average
+        );
+
+        this.drawEchart(
+          echart_title,
+          i,
+          "change",
+          "bar",
+          this.echart_data[i].datas.change
+        );
+      }
+    },
+    drawEchart(echart_title,index, data_type, echart_type, e_data) {
+      var echart_id = data_type + "_" + echart_title.replace(".", "_") + '_' + index;
+      var myChart = echarts.init(document.getElementById(echart_id));
+
+      var option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+
+          formatter(params) {
+            var res = "<p>x_value: " + params[0].name + "</p>";
+            var s_name;
+            var average;
+            var tmp;
+
+            for (var i = 0; i < params.length; i++) {
+              s_name = "<p>" + params[i].seriesName + "</p>";
+              tmp = params[i].data.toFixed(4);
+              average = "<p>" + data_type + ":" + tmp + "</p>";
+              res += "</br>" + s_name + average;
+            }
+            return res;
+          },
+        },
+        title: {
+          text: echart_title,
+        },
+        legend: {
+          data: this.getSeriesNames(e_data),
+        },
+        xAxis: {
+          data: e_data[0].x_params,
+        },
+        yAxis: {},
+
+        grid: {
+          left: "15%",
+        },
+      };
+      var series = this.renderSeries(e_data, echart_type);
+      option.series = series;
+      option && myChart.setOption(option, true); //绘图
+    },
+    showExample() {
+      this.filter = "suite:netperf;pp.netperf.test:TCP_STREAM;tbox_group:vm-2p8g;";
+      this.series = "os:centos;os:openeuler;";
+      this.metrics = "netperf.workload";
+      this.x_params = "send_size";
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style lang='less' scoped>
+.input_class {
+  width: 35%;
+  @media screen and (max-width: 1000px) {
+    width: 100%;
+  }
+}
+.confirm {
+  position: absolute;
+  top: 390px;
+  left: 800px;
+  @media screen and (max-width: 1000px) {
+    display: none;
+  }
+}
+.example {
+  position: absolute;
+  top: 390px;
+  left: 1000px;
+  @media screen and (max-width: 1000px) {
+    display: none;
+  }
+}
+
+.containers {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 20px;
+}
+.chart {
+  width: 1000px;
+  height: 720px;
+  margin-bottom: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/performanceresult/performanceupdate.vue b/src/views/performanceresult/performanceupdate.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bb53eb43366264bdedc4e4fa053b805f609c902c
--- /dev/null
+++ b/src/views/performanceresult/performanceupdate.vue
@@ -0,0 +1,2649 @@
+
+<template>
+  <div id="CustomErrorBar">
+    <Header class="main-header"></Header>
+    <h1 class="title">Performance Result for Update</h1>
+    <div class="content">
+      <div style="background-color: #eeeeee; float: left">
+        <p style="text-align: center; margin-top: 10px; margin-bottom: 10px">
+          <font size="5">比较基线</font>
+        </p>
+        <el-form>
+          <el-form-item label="os" label-width="120px" class="input_class">
+            <el-select v-model="os_select" size="medium" disabled> </el-select>
+          </el-form-item>
+          <el-form-item
+            label="os_version"
+            label-width="120px"
+            class="input_class"
+          >
+            <el-select
+              v-model="os_version"
+              filterable
+              placeholder="请选择"
+              size="medium"
+              clearable
+              @change="getSelectGroup"
+            >
+              <el-option
+                v-for="item in versionData"
+                :key="item"
+                :label="item"
+                :value="item"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item
+            label="group_id"
+            label-width="120px"
+            class="input_class"
+          >
+            <el-select
+              v-model="group_id_a"
+              filterable
+              placeholder="请选择"
+              size="medium"
+              clearable
+            >
+              <el-option
+                v-for="item in groupData"
+                :key="item"
+                :label="item"
+                :value="item"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div style="float: right">
+        <el-form>
+          <el-form-item>
+            <el-button @click="addObject">增加</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="delObject">删除</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div style="background-color: #eeeeee; float: right; margin-right: 20px">
+        <p style="text-align: center; margin-top: 10px; margin-bottom: 10px">
+          <font size="5">对比对象</font>
+        </p>
+        <div style="float: left">
+          <el-form>
+            <el-form-item label="os" label-width="120px" class="input_class">
+              <el-select v-model="os_select" size="medium" disabled>
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              label="os_version"
+              label-width="120px"
+              class="input_class"
+            >
+              <el-select
+                v-model="os_version"
+                filterable
+                placeholder="请选择"
+                size="medium"
+                clearable
+                @change="getSelectGroup"
+              >
+                <el-option
+                  v-for="item in versionData"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              label="group_id"
+              label-width="120px"
+              class="input_class"
+            >
+              <el-select
+                v-model="group_id_b"
+                filterable
+                placeholder="请选择"
+                size="medium"
+                clearable
+              >
+                <el-option
+                  v-for="item in groupData"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <div
+          v-for="(obj, index) in compare_object"
+          :key="index"
+          style="float: left"
+        >
+          <el-form>
+            <el-form-item class="input_class">
+              <el-select v-model="os_select" size="medium" disabled>
+              </el-select>
+            </el-form-item>
+            <el-form-item class="input_class">
+              <el-select
+                v-model="os_version"
+                filterable
+                placeholder="请选择"
+                size="medium"
+                clearable
+                @change="getSelectGroup"
+              >
+                <el-option
+                  v-for="item in versionData"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item class="input_class">
+              <el-select
+                v-model="obj.group_id"
+                filterable
+                placeholder="请选择"
+                size="medium"
+                clearable
+              >
+                <el-option
+                  v-for="item in groupData"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <div style="float: left; width: 100%; margin-top: 20px">
+        <div style="float: left; width: 45%; margin-left: 20%">
+          <el-radio-group v-model="suite" @change="radioChange">
+            <el-radio label="stream">stream</el-radio>
+            <el-radio label="netperf">netperf</el-radio>
+            <el-radio label="unixbench">unixbench</el-radio>
+            <el-radio label="lmbench3">lmbench3</el-radio>
+            <el-radio label="libmicro">libmicro</el-radio>
+            <el-radio label="fio-basic">fio-basic</el-radio>
+          </el-radio-group>
+        </div>
+        <div style="float: left">
+          <el-form>
+            <el-form-item class="confirm">
+              <el-button @click="queryCharts">确定</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div style="float: left; margin-left: 7%">
+          <el-form>
+            <el-form-item class="confirm">
+              <el-button @click="getExcel">导出</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div style="float: left; margin-left: 30%">
+          <el-transfer
+            filterable
+            :titles="['可选表头项', '已选表头项']"
+            v-model="transfer_chosen"
+            :data="transfer_data"
+            @change="transferChange"
+          >
+          </el-transfer>
+        </div>
+      </div>
+    </div>
+    <div id="container" class="containers">
+      <div>
+        <el-dialog :title="testbox" :visible.sync="dialogTableVisible">
+          <textarea
+            v-model="textData"
+            style="font-size: 15pt; width: 100%"
+            rows="33"
+            disabled
+          ></textarea>
+        </el-dialog>
+      </div>
+      <div v-show="im_show">
+        <el-table
+          :data="table_improve"
+          border
+          :header-cell-style="{ background: '#ffc000', color: '#000' }"
+          style="width: 500px"
+        >
+          <el-table-column
+            :label="suite"
+            prop="compare_versions"
+          ></el-table-column>
+          <el-table-column
+            label="总体性能提升比例"
+            prop="improvement"
+            width="150"
+          ></el-table-column>
+        </el-table>
+      </div>
+      <div
+        v-for="(l_item, l_index) in unixbench_data.table_data"
+        :key="l_index"
+      >
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ l_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(l_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="l_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in unixbench_filter(l_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${l_item.title.replace(
+            '.',
+            '_'
+          )}_${l_index}_${l_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${l_item.title.replace(
+            '.',
+            '_'
+          )}_${l_index}_${l_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+      </div>
+
+      <div
+        v-for="(l_item, l_index) in lmbench_data_a.table_data"
+        :key="l_index"
+      >
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ l_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(l_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="l_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in lmbench3_filter(l_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${l_item.title.replace(
+            '.',
+            '_'
+          )}_${l_index}_${l_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${l_item.title.replace(
+            '.',
+            '_'
+          )}_${l_index}_${l_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+          v-show="l_item.data.length > 2"
+        ></div>
+      </div>
+
+      <div
+        v-for="(l_item, l_index) in lmbench_data_b.table_data"
+        :key="l_index"
+      >
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ l_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(l_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="l_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in lmbench3_filter(l_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${l_item.title.replace(
+            '.',
+            '_'
+          )}_${l_index}_${l_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${l_item.title.replace(
+            '.',
+            '_'
+          )}_${l_index}_${l_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+          v-show="l_item.data.length > 2"
+        ></div>
+      </div>
+
+      <div
+        v-for="(l_item, l_index) in lmbench_data_c.table_data"
+        :key="l_index"
+      >
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ l_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(l_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="l_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in lmbench3_filter(l_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${l_item.title.replace(
+            '.',
+            '_'
+          )}_${l_index}_${l_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${l_item.title.replace(
+            '.',
+            '_'
+          )}_${l_index}_${l_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+          v-show="l_item.data.length > 2"
+        ></div>
+      </div>
+
+      <div
+        v-for="(l_item, l_index) in lmbench_data_d.table_data"
+        :key="l_index"
+      >
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ l_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(l_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="l_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in lmbench3_filter(l_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${l_item.title.replace(
+            '.',
+            '_'
+          )}_${l_index}_${l_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${l_item.title.replace(
+            '.',
+            '_'
+          )}_${l_index}_${l_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+          v-show="l_item.data.length > 2"
+        ></div>
+      </div>
+
+      <div
+        v-for="(l_item, l_index) in lmbench_data_e.table_data"
+        :key="l_index"
+      >
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ l_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(l_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="l_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in lmbench3_filter(l_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${l_item.title.replace(
+            '.',
+            '_'
+          )}_${l_index}_${l_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${l_item.title.replace(
+            '.',
+            '_'
+          )}_${l_index}_${l_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+          v-show="l_item.data.length > 2"
+        ></div>
+      </div>
+
+      <div
+        v-for="(l_item, l_index) in lmbench_data_f.table_data"
+        :key="l_index"
+      >
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ l_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(l_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="l_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in lmbench3_filter(l_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${l_item.title.replace(
+            '.',
+            '_'
+          )}_${l_index}_${l_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${l_item.title.replace(
+            '.',
+            '_'
+          )}_${l_index}_${l_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+          v-show="l_item.data.length > 2"
+        ></div>
+      </div>
+
+      <div v-for="(t_item, t_index) in libmicro_data.table_data" :key="t_index">
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ t_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(t_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="t_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in libmicro_filter(t_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+      </div>
+
+      <div v-for="(t_item, t_index) in stream_data.table_data" :key="t_index">
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ t_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(t_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="t_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in stream_filter(t_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+      </div>
+
+      <div v-for="(t_item, t_index) in fio_data.table_data" :key="t_index">
+        <div class="test_params" style="float: left" v-show="false">
+          test_params:{{ t_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(t_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="t_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in fio_filter(t_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+          v-show="t_item.data.length > 2"
+        ></div>
+      </div>
+
+      <div v-for="(t_item, t_index) in fio_data_b.table_data" :key="t_index">
+        <div class="test_params" style="float: left" v-show="false">
+          test_params:{{ t_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(t_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="t_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in fio_filter(t_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+          v-show="t_item.data.length > 2"
+        ></div>
+      </div>
+
+      <div v-for="(t_item, t_index) in fio_data_c.table_data" :key="t_index">
+        <div class="test_params" style="float: left" v-show="false">
+          test_params:{{ t_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(t_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="t_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in fio_filter(t_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${t_item.title.replace(
+            '.',
+            '_'
+          )}_${t_index}_${t_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+          v-show="t_item.data.length > 2"
+        ></div>
+      </div>
+
+      <div v-for="(l_item, l_index) in netperfb_data.table_data" :key="l_index">
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ l_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(l_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="l_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in netperf_filter(l_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${l_item.title.replace(
+            '.',
+            '_'
+          )}_${l_index}_${l_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${l_item.title.replace(
+            '.',
+            '_'
+          )}_${l_index}_${l_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+          v-show="l_item.data.length > 2"
+        ></div>
+      </div>
+
+      <div v-for="(l_item, l_index) in netperfa_data.table_data" :key="l_index">
+        <div class="test_params" style="float: left" v-show="false">
+          test_params: {{ l_item.test_params }}
+        </div>
+        <div style="float: right">
+          <el-form>
+            <el-form-item>
+              <el-button @click="getHostInfo(l_item.testbox)"
+                >host info</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-table
+            :data="l_item.data"
+            border
+            :header-cell-style="{ background: '#02951e', color: '#000' }"
+            :row-style="tableRowStyle"
+            :cell-style="tableCellStyle"
+            style="width: 1500px"
+          >
+            <el-table-column
+              v-for="(item, index) in netperf_filter(l_item.header)"
+              :key="index"
+              :label="item"
+              :prop="item"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div
+          :id="`average_${l_item.title.replace(
+            '.',
+            '_'
+          )}_${l_index}_${l_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+        ></div>
+
+        <div
+          :id="`change_${l_item.title.replace(
+            '.',
+            '_'
+          )}_${l_index}_${l_item.test_params.replace(/\.|\s/g, '_')}`"
+          :style="{ width: '100%', height: '600px' }"
+          v-show="l_item.data.length > 2"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getPerformanceResult, QueryField, getHostInfo } from "@/api/jobs.js";
+import Header from "@/components/Header";
+import echarts from "echarts";
+import XLSX from "xlsx";
+import XLSXS from "xlsx-style";
+import filesaver from "file-saver";
+//const cityOptions = ['上海', '北京', '广州', '深圳'];
+export default {
+  name: "CustomErrorBar",
+  components: { Header },
+  data() {
+    return {
+      im_show: false,
+      textData: "",
+      testbox: "",
+      dialogTableVisible: false,
+      stream_selected: [],
+      netperf_selected: [],
+      unixbench_selected: [],
+      lmbench3_selected: [],
+      libmicro_selected: [],
+      fio_selected: [],
+      t_headers: ["copy", "scale", "add", "triad"],
+      transfer_data: [],
+      transfer_chosen: [],
+      compare_object: [],
+      suite: "stream",
+      osData: [],
+      versionData: [],
+      groupData: [],
+      checkQuery: {
+        filter: {
+          suite: [],
+          os: ["openeuler"],
+          os_version: [],
+        },
+        field: "os_version",
+      },
+      checkQuery_b: {
+        filter: {
+          suite: [],
+          os: ["openeuler"],
+          os_version: [],
+        },
+        field: "os_version",
+      },
+      os_select: "openeuler",
+      os_version: "",
+      group_id_a: "",
+      group_id_b: "",
+      stream_data: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: {
+            interval_type: ["openeuler-update"],
+            os: ["openeuler"],
+            suite: ["stream"],
+            os_version: [],
+            group_id: [],
+          },
+          metrics: [
+            "stream.copy_bandwidth_MBps",
+            "stream.scale_bandwidth_MBps",
+            "stream.add_bandwidth_MBps",
+            "stream.triad_bandwidth_MBps",
+          ],
+          series: ["group_id"],
+          x_params: ["metric"],
+          max_series_num: 2,
+        },
+      },
+      lmbench_data_a: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: {
+            interval_type: ["openeuler-update"],
+            os: ["openeuler"],
+            suite: ["lmbench3"],
+          },
+          metrics: [
+            "lmbench3.syscall.syscall.latency.us",
+            "lmbench3.syscall.stat.latency.us",
+            "lmbench3.syscall.open/close.latency.us",
+            "lmbench3.null_io",
+            "lmbench3.Process.fork+exit.latency.us",
+            ".Process.fork+execve.latency.us",
+            "lmbench3.Process.fork+/bin/sh.latency.us",
+            "lmbench3.Select.100tcp.latency.us",
+            "lmbench3.sig_inst",
+            "lmbench3.sig_hndl",
+          ],
+          series: ["group_id"],
+          x_params: ["metric"],
+          max_series_num: 2,
+          title: "Processor_Processes",
+        },
+      },
+      lmbench_data_b: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: {
+            interval_type: ["openeuler-update"],
+            os: ["openeuler"],
+            suite: ["lmbench3"],
+          },
+          metrics: [
+            "lmbench3.PIPE.latency.us",
+            "lmbench3.AF_UNIX.sock.stream.latency.us",
+            "lmbench3.UDP.usinglocalhost.latency.us",
+            "lmbench3.TCP.localhost.latency",
+            "lmbench3.CONNECT.localhost.latency.us",
+          ],
+          series: ["group_id"],
+          x_params: ["metric"],
+          max_series_num: 2,
+          title: "local_latency",
+        },
+      },
+      lmbench_data_c: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: {
+            interval_type: ["openeuler-update"],
+            os: ["openeuler"],
+            suite: ["lmbench3"],
+          },
+          metrics: [
+            "lmbench3.PIPE.bandwidth.MB/sec",
+            "mbench3.AF_UNIX.sock.stream.bandwidth.MB",
+            "lmbench3.TCP.socket.bandwidth.10MB.MB/sec",
+            "lmbench3.FILE.read.bandwidth.MB/sec",
+            "lmbench3.MMAP.read.bandwidth.MB/sec",
+            "lmbench3.BCOPY.libc.bandwidth.MB/sec",
+            "lmbench3.BCOPY.unrolled.bandwidth.MB/sec",
+            "lmbench3.BCOPY.memory_read.bandwidth.MB/sec",
+            "lmbench3.BCOPY.memory_write.bandwidth.MB/sec",
+          ],
+          series: ["group_id"],
+          x_params: ["metric"],
+          max_series_num: 2,
+          title: "local_bandwidths",
+        },
+      },
+      lmbench_data_d: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: {
+            interval_type: ["openeuler-update"],
+            os: ["openeuler"],
+            suite: ["lmbench3"],
+          },
+          metrics: [
+            "lmbench3.CTX.2P.0K.latency.us",
+            "lmbench3.CTX.2P.16K.latency.us",
+            "lmbench3.CTX.2P.64K.latency.us",
+            "lmbench3.CTX.8P.16K.latency.us",
+            "lmbench3.CTX.8P.64K.latency.us",
+            "lmbench3.CTX.16P.16K.latency.us",
+            "lmbench3.CTX.16P.64K.latency.us",
+          ],
+          series: ["group_id"],
+          x_params: ["metric"],
+          max_series_num: 2,
+          title: "Context_switching",
+        },
+      },
+      lmbench_data_e: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: {
+            interval_type: ["openeuler-update"],
+            os: ["openeuler"],
+            suite: ["lmbench3"],
+          },
+          metrics: [
+            "lmbench3.Mmap_Latency",
+            "lmbench3.Prot_Fault",
+            "lmbench3.Pagefaults.ms",
+            "lmbench3.Select.100fd.latency.us",
+          ],
+          series: ["group_id"],
+          x_params: ["metric"],
+          max_series_num: 2,
+          title: "VM_latencies",
+        },
+      },
+      lmbench_data_f: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: {
+            interval_type: ["openeuler-update"],
+            os: ["openeuler"],
+            suite: ["lmbench3"],
+          },
+          metrics: [
+            "lmbench3.L1_$",
+            "lmbench3.L2_$",
+            "lmbench3.Main_mem",
+            "lmbench3.Rand_mem",
+          ],
+          series: ["group_id"],
+          x_params: ["metric"],
+          max_series_num: 2,
+          title: "Memor_latencies",
+        },
+      },
+      libmicro_data: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: {
+            interval_type: ["openeuler-update"],
+            os: ["openeuler"],
+            suite: ["libmicro"],
+            os_version: [],
+            group_id: [],
+          },
+          metrics: [],
+          series: ["group_id"],
+          x_params: ["metric"],
+          max_series_num: 2,
+        },
+      },
+      unixbench_data: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: {
+            interval_type: ["openeuler-update"],
+            os: ["openeuler"],
+            suite: ["unixbench"],
+            os_version: [],
+            group_id: [],
+          },
+          metrics: ["unixbench.score"],
+          series: ["group_id"],
+          x_params: ["test"],
+          max_series_num: 2,
+        },
+      },
+      fio_data: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: {
+            interval_type: ["openeuler-update"],
+            os: ["openeuler"],
+            suite: ["fio-basic"],
+            "pp.fio-setup-basic.rw": ["randrw"],
+            os_version: [],
+            group_id: [],
+          },
+          metrics: [
+            "fio.read_iops",
+            "fio.read_bw_MBps",
+            "fio.write_iops",
+            "fio.write_bw_MBps",
+          ],
+          series: ["group_id"],
+          x_params: ["bs"],
+          max_series_num: 2,
+          test_params: ["pp.fio-setup-basic.rw"],
+        },
+      },
+      fio_data_b: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: {
+            interval_type: ["openeuler-update"],
+            os: ["openeuler"],
+            suite: ["fio-basic"],
+            "pp.fio-setup-basic.rw": ["read", "randread"],
+          },
+          metrics: ["fio.read_iops", "fio.read_bw_MBps"],
+          series: ["group_id"],
+          x_params: ["bs"],
+          max_series_num: 2,
+          test_params: ["pp.fio-setup-basic.rw"],
+        },
+      },
+      fio_data_c: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: {
+            interval_type: ["openeuler-update"],
+            os: ["openeuler"],
+            suite: ["fio-basic"],
+            "pp.fio-setup-basic.rw": ["write", "randwrite"],
+          },
+          metrics: ["fio.write_iops", "fio.wirte_bw_MBps"],
+          series: ["group_id"],
+          x_params: ["bs"],
+          max_series_num: 2,
+          test_params: ["pp.fio-setup-basic.rw"],
+        },
+      },
+      netperfa_data: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: {
+            interval_type: ["openeuler-update"],
+            os: ["openeuler"],
+            suite: ["netperf"],
+            "pp.netperf.test": ["TCP_STREAM", "UDP_STREAM"],
+            os_version: [],
+            group_id: [],
+          },
+          metrics: ["netperf.Throughput_Mbps"],
+          series: ["group_id"],
+          x_params: ["send_size"],
+          max_series_num: 2,
+        },
+      },
+      netperfb_data: {
+        table_data: [],
+        echart_data: [],
+        QueryData: {
+          filter: {
+            interval_type: ["openeuler-update"],
+            os: ["openeuler"],
+            suite: ["netperf"],
+            "pp.netperf.test": ["TCP_RR", "TCP_CRR", "UDP_RR"],
+            os_version: [],
+            group_id: [],
+          },
+          metrics: ["netperf.Throughput_tps"],
+          series: ["group_id"],
+          x_params: ["test"],
+          max_series_num: 2,
+        },
+      },
+      title_dic: {
+        stream: "Function",
+        "stream-copy_bandwidth_MBps": "copy",
+        "stream-scale_bandwidth_MBps": "scale",
+        "stream-add_bandwidth_MBps": "add",
+        "stream-triad_bandwidth_MBps": "triad",
+        "netperf-Throughput_tps": "Protocol_kind",
+        libmicro: "Function",
+        "whetston-double": "Double-Precision_Whetstone",
+        shell1: "Shell_Scripts_(1_concurrent)",
+        shell8: "Shell_Scripts_(8_concurrent)",
+        pipe: "Pipe_Throughput",
+        context1: "Pipe-based_Context_Switching",
+        spawn: "Process_Creation",
+        syscall: "System_Call_Overhead",
+        dhry2reg: "Dhrystone_2_using_register_variables",
+        fstime: "File_Copy_1024_bufsize_2000_maxblocks",
+        fsbuffer: "File_Copy_256_bufsize_500_maxblocks",
+        fsdisk: "File_Copy_4096_bufsize_8000_maxblocks",
+        execl: "Execl_Throughput",
+        "lmbench3-syscall-syscall-latency-us": "null_call",
+        "lmbench3-null_io": "null_io",
+        "lmbench3-syscall-stat-latency-us": "stat",
+        "lmbench3-syscall-open/close-latency-us": "open_close",
+        "lmbench3-Select-100tcp-latency-us": "slct_TCP",
+        "lmbench3-sig_inst": "sig_inst",
+        "lmbench3-sig_hndl": "sig_hndl",
+        "lmbench3-Process-fork+exit-latency-us": "fork_proc",
+        "lmbench3-Process-fork+execve-latency-us": "exec_proc",
+        "lmbench3-Process-fork+/bin/sh-latency-us": "sh_proc",
+        "lmbench3-PIPE-latency-us": "Pipe",
+        "lmbench3-AF_UNIX-sock-stream-latency-us": "AF_UNIX",
+        "lmbench3-UDP-usinglocalhost-latency-us": "UDP",
+        "lmbench3-TCP-localhost-latency": "TCP",
+        "lmbench3-CONNECT-localhost-latency-us": "TCP_conn",
+        "lmbench3-PIPE-bandwidth-MB/sec": "Pipe",
+        "mbench3-AF_UNIX-sock-stream-bandwidth-MB": "AF_UNIX",
+        "lmbench3-TCP-socket-bandwidth-10MB-MB/sec": "TCP",
+        "lmbench3-FILE-read-bandwidth-MB/sec": "File_reread",
+        "lmbench3-MMAP-read-bandwidth-MB/sec": "Mmap_reread",
+        "lmbench3-BCOPY-libc-bandwidth-MB/sec": "copy(libc)",
+        "lmbench3-BCOPY-unrolled-bandwidth-MB/sec": "copy(hand)",
+        "lmbench3-BCOPY-memory_read-bandwidth-MB/sec": "Mem_read",
+        "lmbench3-BCOPY-memory_write-bandwidth-MB/sec": "Mem_write",
+        "lmbench3-CTX-2P-0K-latency-us": "2p/0K",
+        "lmbench3-CTX-2P-16K-latency-us": "2p/16K",
+        "lmbench3-CTX-2P-64K-latency-us": "2p/64K",
+        "lmbench3-CTX-8P-16K-latency-us": "8p/16K",
+        "lmbench3-CTX-8P-64K-latency-us": "8p/64K",
+        "lmbench3-CTX-16P-16K-latency-us": "16p/16K",
+        "lmbench3-CTX-16P-64K-latency-us": "16p/64K",
+        "lmbench3-Mmap_Latency": "Mmap_Latency",
+        "lmbench3-Prot_Fault": "Prot_Fault",
+        "lmbench3-Pagefaults-ms": "Page_Fault",
+        "lmbench3-Select-100fd-latency-us": "100fd_selct",
+        "lmbench3-L1_$": "L1_$",
+        "lmbench3-L2_$": "L2_$",
+        "lmbench3-Main_mem": "Main_mem",
+        "lmbench3-Rand_mem": "Rand_mem",
+      },
+      improve_percent: {},
+      table_improve: [],
+    };
+  },
+  methods: {
+    renderDeviationAreaArray(dataArray, deviationArray) {
+      //用于生成方差区域的数组
+      var deviationAreaArray = [];
+      var len = dataArray.length;
+      for (var i = 0; i < len; i++) {
+        deviationAreaArray.push([
+          i,
+          dataArray[i] + (dataArray[i] * deviationArray[i]) / 100,
+          dataArray[i] - (dataArray[i] * deviationArray[i]) / 100,
+        ]); //[x坐标序号,最大值，最小值]
+      }
+      return deviationAreaArray;
+    },
+    renderItem(_params, api) {
+      //生成描绘方差图所需的参数
+      var xValue = api.value(0);
+      var highPoint = api.coord([xValue, api.value(1)]);
+      var lowPoint = api.coord([xValue, api.value(2)]);
+      var halfWidth = api.size([1, 0])[0] * 0.1;
+      var style = api.style({
+        stroke: api.visual("color"),
+        fill: null,
+      });
+
+      return {
+        type: "group",
+        children: [
+          {
+            type: "line",
+            transition: ["shape"],
+            shape: {
+              x1: highPoint[0] - halfWidth,
+              y1: highPoint[1],
+              x2: highPoint[0] + halfWidth,
+              y2: highPoint[1],
+            },
+            style: style,
+          },
+          {
+            type: "line",
+            transition: ["shape"],
+            shape: {
+              x1: highPoint[0],
+              y1: highPoint[1],
+              x2: lowPoint[0],
+              y2: lowPoint[1],
+            },
+            style: style,
+          },
+          {
+            type: "line",
+            transition: ["shape"],
+            shape: {
+              x1: lowPoint[0] - halfWidth,
+              y1: lowPoint[1],
+              x2: lowPoint[0] + halfWidth,
+              y2: lowPoint[1],
+            },
+            style: style,
+          },
+        ],
+      };
+    },
+    renderSeries(sourceData, echart_type) {
+      //描绘折线图+方差图所需的参数
+      var series = [];
+      for (var j = 0; j < sourceData.length; j++) {
+        var objLine = {
+          name: sourceData[j].series,
+          type: echart_type,
+          data: sourceData[j].data,
+        };
+        var objCustom = {
+          type: "custom",
+          itemStyle: {
+            normal: {
+              borderWidth: 1.5,
+              borderType: "dotted",
+            },
+          },
+          z: 100,
+        };
+
+        series.push(objLine);
+        series.push(objCustom);
+      }
+
+      return series;
+    },
+    getSeriesNames(sourceData) {
+      var s_names = [];
+      for (var i = 0; i < sourceData.length; i++) {
+        s_names[i] = sourceData[i].series;
+      }
+      return s_names;
+    },
+    clean_data() {
+      this.stream_data.table_data = [];
+      this.stream_data.echart_data = [];
+
+      this.lmbench_data_a.table_data = [];
+      this.lmbench_data_a.echart_data = [];
+      this.lmbench_data_b.table_data = [];
+      this.lmbench_data_b.echart_data = [];
+      this.lmbench_data_c.table_data = [];
+      this.lmbench_data_c.echart_data = [];
+      this.lmbench_data_d.table_data = [];
+      this.lmbench_data_d.echart_data = [];
+      this.lmbench_data_e.table_data = [];
+      this.lmbench_data_e.echart_data = [];
+      this.lmbench_data_f.table_data = [];
+      this.lmbench_data_f.echart_data = [];
+
+      this.libmicro_data.table_data = [];
+      this.libmicro_data.echart_data = [];
+
+      this.unixbench_data.table_data = [];
+      this.unixbench_data.echart_data = [];
+
+      this.fio_data.table_data = [];
+      this.fio_data.echart_data = [];
+      this.fio_data_b.table_data = [];
+      this.fio_data_b.echart_data = [];
+      this.fio_data_c.table_data = [];
+      this.fio_data_c.echart_data = [];
+
+      this.netperfa_data.table_data = [];
+      this.netperfa_data.echart_data = [];
+
+      this.netperfb_data.table_data = [];
+      this.netperfb_data.echart_data = [];
+    },
+    getTableData(sData, table_data) {
+      var avg_data = sData.datas.average;
+      var change_data = sData.datas.change;
+      var tData = [];
+      var tHeader = [];
+      var title_trans = this.title_dic[sData.title] || sData.title;
+      var test_params = sData.test_params;
+
+      if (title_trans == "netperf-Throughput_Mbps") {
+        if (sData.test_params.includes("TCP")) {
+          title_trans = "TCP_STREAM_MESSAGE_SIZE";
+        } else {
+          title_trans = "UDP_STREAM_MESSAGE_SIZE";
+        }
+      }
+      if (title_trans == "unixbench-score") {
+        if (sData.test_params.includes("96")) {
+          title_trans = "Index_Values_96core";
+        } else {
+          title_trans = "Index_Values_1core";
+        }
+      }
+      if (title_trans.includes("fio")) {
+        if (
+          test_params.includes("randread") ||
+          test_params.includes("randwrite")
+        ) {
+          title_trans =
+            "rand" +
+            title_trans.replace("fio-", "").replace("_MBps", "") +
+            "_blocksize";
+        } else if (test_params.includes("randrw")) {
+          title_trans =
+            "randrw" +
+            title_trans.replace("fio-", "").replace("_MBps", "") +
+            "_blocksize";
+        } else {
+          title_trans =
+            title_trans.replace("fio-", "").replace("_MBps", "") + "_blocksize";
+        }
+      }
+
+      tHeader.push(title_trans);
+      tHeader = tHeader.concat(avg_data[0].x_params);
+      for (var i = 0; i < avg_data.length; i++) {
+        var tmp = this.getRowData(title_trans, avg_data[i]);
+        tData.push(tmp);
+      }
+
+      for (i = 0; i < change_data.length; i++) {
+        tmp = this.getRowData(title_trans, change_data[i]);
+        tData.push(tmp);
+      }
+      table_data.push({
+        header: tHeader,
+        data: tData,
+        title: sData.title,
+        title_trans: title_trans,
+        test_params: sData.test_params,
+        testbox: sData.testbox,
+      });
+    },
+    getRowData(title, data) {
+      var tmp = {};
+      tmp[title] = data.series;
+
+      if (data.series.includes("vs")) {
+        if (this.improve_percent[data.series] == null) {
+          this.improve_percent[data.series] = { total: 0, num: 0, percent: 0 };
+        }
+        for (var i = 0; i < data.x_params.length; i++) {
+          tmp[data.x_params[i]] = data.data[i] + "%";
+          this.improve_percent[data.series].total += data.data[i];
+          this.improve_percent[data.series].num += 1;
+        }
+        this.improve_percent[data.series].percent =
+          this.improve_percent[data.series].total /
+          this.improve_percent[data.series].num;
+        this.table_improve = [
+          {
+            compare_versions: data.series,
+            improvement:
+              this.improve_percent[data.series].percent.toFixed(4) + "%",
+          },
+        ];
+        this.im_show = true;
+      } else {
+        for (i = 0; i < data.x_params.length; i++) {
+          tmp[data.x_params[i]] = data.data[i];
+        }
+      }
+      return tmp;
+    },
+    trans_x(datas) {
+      var avg_data = datas.average;
+      var change_data = datas.change;
+      var tHeader = avg_data[0].x_params;
+
+      for (var i = 0; i < tHeader.length; i++) {
+        tHeader[i] = this.title_dic[tHeader[i]] || tHeader[i];
+        if (tHeader[i].includes("libmicro")) {
+          tHeader[i] = tHeader[i].replace("libmicro-", "");
+        }
+      }
+
+      for (i = 0; i < avg_data.length; i++) {
+        avg_data[i].x_params = tHeader;
+      }
+      for (i = 0; i < change_data.length; i++) {
+        change_data[i].x_params = tHeader;
+      }
+      datas.average = avg_data;
+      datas.change = change_data;
+
+      return datas;
+    },
+    transfer_res(res) {
+      var destination = {};
+      destination = res;
+
+      for (var i = 0; i < destination.length; i++) {
+        destination[i].datas = this.trans_x(destination[i].datas);
+      }
+      return destination;
+    },
+    getData(JobData) {
+      getPerformanceResult(JobData.QueryData).then((res) => {
+        //console.log(res);
+        JobData.echart_data = this.transfer_res(res);
+        var sourceData = JobData.echart_data;
+
+        for (var i = 0; i < sourceData.length; i++) {
+          this.getTableData(sourceData[i], JobData.table_data);
+        }
+        this.sleep(2000).then(() => {
+          this.get_Echarts(JobData.echart_data);
+        });
+      });
+    },
+    getTableHeaders() {
+      if (this.suite == "stream") {
+        this.t_headers = ["copy", "scale", "add", "triad"];
+        this.stream_selected = this.t_headers;
+      } else if (this.suite == "netperf") {
+        this.t_headers = [
+          "TCP_RR",
+          "TCP_CRR",
+          "UDP_RR",
+          "1",
+          "64",
+          "128",
+          "256",
+          "512",
+          "1024",
+          "1500",
+          "2048",
+          "4096",
+          "9000",
+          "16384",
+          "32768",
+          "65536",
+        ];
+        this.netperf_selected = this.t_headers;
+      } else if (this.suite == "unixbench") {
+        this.t_headers = [
+          "Double-Precision_Whetstone",
+          "Shell_Scripts_(1_concurrent)",
+          "Shell_Scripts_(8_concurrent)",
+          "Pipe_Throughput",
+          "Pipe-based_Context_Switching",
+          "Process_Creation",
+          "System_Call_Overhead",
+          "Dhrystone_2_using_register_variables",
+          "File_Copy_1024_bufsize_2000_maxblocks",
+          "File_Copy_256_bufsize_500_maxblocks",
+          "File_Copy_4096_bufsize_8000_maxblocks",
+          "Execl_Throughput",
+          "System_Benchmarks_Index_Score",
+        ];
+        this.unixbench_selected = this.t_headers;
+      } else if (this.suite == "lmbench3") {
+        this.t_headers = [
+          "null_call",
+          "null_io",
+          "stat",
+          "open_close",
+          "slct_TCP",
+          "sig_inst",
+          "sig_hndl",
+          "fork_proc",
+          "exec_proc",
+          "sh_proc",
+          "Pipe",
+          "AF_UNIX",
+          "UDP",
+          "TCP",
+          "TCP_conn",
+          "File_reread",
+          "Mmap_reread",
+          "copy(libc)",
+          "copy(hand)",
+          "Mem_read",
+          "Mem_write",
+          "2p/0K",
+          "2p/16K",
+          "2p/64K",
+          "8p/16K",
+          "8p/64K",
+          "16p/16K",
+          "16p/64K",
+          "Mmap_Latency",
+          "Prot_Fault",
+          "Page_Fault",
+          "100fd_selct",
+          "L1_$",
+          "L2_$",
+          "Main_mem",
+          "Rand_mem",
+        ];
+        this.lmbench3_selected = this.t_headers;
+      } else if (this.suite == "fio-basic") {
+        this.t_headers = [
+          "4k",
+          "16k",
+          "32k",
+          "64k",
+          "128k",
+          "256k",
+          "512k",
+          "1024k",
+        ];
+        this.fio_selected = this.t_headers;
+      } else if (this.suite == "libmicro") {
+        this.t_headers = [
+          "getpid",
+          "getenv",
+          "getenvT2",
+          "gettimeofday",
+          "log",
+          "exp",
+          "lrand48",
+          "memset_10",
+          "memset_256",
+          "memset_256_u",
+          "memset_1k",
+          "memset_4k",
+          "memset_4k_uc",
+          "memset_10k",
+          "memset_1m",
+          "memset_10m",
+          "memsetP2_10m",
+          "memrand",
+          "isatty_yes",
+          "isatty_no",
+          "malloc_10",
+          "malloc_100",
+          "malloc_1k",
+          "malloc_10k",
+          "malloc_100k",
+          "mallocT2_10",
+          "mallocT2_100",
+          "mallocT2_1k",
+          "mallocT2_10k",
+          "mallocT2_100k",
+          "close_bad",
+          "close_tmp",
+          "close_usr",
+          "close_zero",
+          "memcpy_10",
+          "memcpy_1k",
+          "memcpy_10k",
+          "memcpy_1m",
+          "memcpy_10m",
+          "strcpy_10",
+          "strchr_1k",
+          "strcmp_10",
+          "strcmp_1k",
+          "scasecmp_10",
+          "scasecmp_1k",
+          "strtol",
+          "getcontext",
+          "setcontext",
+          "mutex_st",
+          "mutex_mt",
+          "mutex_T2",
+          "longjmp",
+          "siglongjmp",
+          "getrusage",
+          "times",
+          "time",
+          "localtime_r",
+          "strftime",
+          "mktime",
+          "mktimeT2",
+          "c_mutex_1",
+          "c_mutex_10",
+          "c_mutex_200",
+          "c_cond_1",
+          "c_cond_10",
+          "c_cond_200",
+          "c_lockf_1",
+          "c_lockf_10",
+          "c_lockf_200",
+          "c_flock",
+          "c_flock_10",
+          "c_flock_200",
+          "c_fcntl_1",
+          "c_fcntl_10",
+          "c_fcntl_200",
+          "file_lock",
+          "getsockname",
+          "getpeername",
+          "chdir_tmp",
+          "chdir_usr",
+          "chgetwd_tmp",
+          "chgetwd_usr",
+          "realpath_tmp",
+          "realpath_usr",
+          "stat_tmp",
+          "stat_usr",
+          "fcntl_tmp",
+          "fcntl_usr",
+          "fcntl_ndelay",
+          "lseek_t8k",
+          "lseek_u8k",
+          "open_tmp",
+          "open_usr",
+          "open_zero",
+          "dup",
+          "socket_u",
+          "socket_i",
+          "socketpair",
+          "setsockopt",
+          "bind",
+          "listen",
+          "connection",
+          "poll_10",
+          "poll_100",
+          "poll_1000",
+          "poll_w10",
+          "poll_w100",
+          "poll_w1000",
+          "select_10",
+          "select_100",
+          "select_1000",
+          "select_w10",
+          "select_w100",
+          "select_w1000",
+          "semop",
+          "sigaction",
+          "signal",
+          "sigprocmask",
+          "pthread_8",
+          "pthread_32",
+          "pthread_128",
+          "pthread_512",
+          "fork_10",
+          "fork_100",
+          "fork_1000",
+          "exit_10",
+          "exit_100",
+          "exit_1000",
+          "exit_10_nolibc",
+          "exec",
+          "system",
+          "recurse",
+          "read_t1k",
+          "read_t10k",
+          "read_t100k",
+          "read_u1k",
+          "read_u10k",
+          "read_u100k",
+          "read_z1k",
+          "read_z10k",
+          "read_z100k",
+          "read_zw100k",
+          "write_t1k",
+          "write_t10k",
+          "write_t100k",
+          "write_u1k",
+          "write_u10k",
+          "write_u100k",
+          "write_n1k",
+          "write_n10k",
+          "write_n100k",
+          "writev_t1k",
+          "writev_t10k",
+          "writev_t100k",
+          "writev_u1k",
+          "writev_u10k",
+          "writev_u100k",
+          "writev_n1k",
+          "writev_n10k",
+          "writev_n100k",
+          "pread_t1k",
+          "pread_t10k",
+          "pread_t100k",
+          "pread_u1k",
+          "pread_u10k",
+          "pread_u100k",
+          "pread_z1k",
+          "pread_z10k",
+          "pread_z100k",
+          "pread_zw100k",
+          "pwrite_t1k",
+          "pwrite_t10k",
+          "pwrite_t100k",
+          "pwrite_u1k",
+          "pwrite_u10k",
+          "pwrite_u100k",
+          "pwrite_n1k",
+          "pwrite_n10k",
+          "pwrite_n100k",
+          "mmap_z8k",
+          "mmap_z128k",
+          "mmap_t8k",
+          "mmap_t128k",
+          "mmap_u8k",
+          "mmap_u128k",
+          "mmap_a8k",
+          "mmap_a128k",
+          "mmap_rz8k",
+          "mmap_rz128k",
+          "mmap_rt8k",
+          "mmap_rt128k",
+          "mmap_ru8k",
+          "mmap_ru128k",
+          "mmap_ra8k",
+          "mmap_ra128k",
+          "mmap_wz8k",
+          "mmap_wz128k",
+          "mmap_wt8k",
+          "mmap_wt128k",
+          "mmap_wu8k",
+          "mmap_wu128k",
+          "mmap_wa8k",
+          "mmap_wa128k",
+          "unmap_z8k",
+          "unmap_z128k",
+          "unmap_t8k",
+          "unmap_t128k",
+          "unmap_u8k",
+          "unmap_u128k",
+          "unmap_a8k",
+          "unmap_a128k",
+          "unmap_rz8k",
+          "unmap_rz128k",
+          "unmap_rt8k",
+          "unmap_rt128k",
+          "unmap_ru8k",
+          "unmap_ru128k",
+          "unmap_ra8k",
+          "unmap_ra128k",
+          "conn_connect",
+          "unmap_wz8k",
+          "unmap_wz128k",
+          "unmap_wt8k",
+          "unmap_wt128k",
+          "unmap_wu8k",
+          "unmap_wu128k",
+          "unmap_wa8k",
+          "unmap_wa128k",
+          "mprot_z8k",
+          "mprot_z128k",
+          "mprot_wz8k",
+          "mprot_wz128k",
+          "mprot_twz8k",
+          "mprot_tw128k",
+          "mprot_tw4m",
+          "pipe_pst1",
+          "pipe_pmt1",
+          "pipe_pmp1",
+          "pipe_pst4k",
+          "pipe_pmt4k",
+          "pipe_pmp4k",
+          "pipe_sst1",
+          "pipe_smt1",
+          "pipe_smp1",
+          "pipe_sst4k",
+          "pipe_smt4k",
+          "pipe_smp4k",
+          "pipe_tst1",
+          "pipe_tmt1",
+          "pipe_tmp1",
+          "pipe_tst4k",
+          "pipe_tmt4k",
+          "pipe_tmp4k",
+          "conn_accept",
+          "close_tcp",
+        ];
+        this.libmicro_selected = this.t_headers;
+      }
+    },
+    radioChange() {
+      this.getVersionData();
+      this.getSelectGroup(this.os_version);
+      this.getTableHeaders();
+      this.getTransferData();
+      this.improve_percent = {};
+      this.table_improve = [];
+      this.im_show = false;
+    },
+    getVersionData() {
+      this.checkQuery.filter.suite = [this.suite];
+      this.checkQuery.filter.os_version = [];
+      this.checkQuery.field = "os_version";
+      this.groupData = [];
+      this.group_id_a = "";
+      this.group_id_b = "";
+
+      QueryField(this.checkQuery).then((res) => {
+        this.versionData = res;
+      });
+    },
+    getSelectGroup(os_version) {
+      this.checkQuery.filter.os_version = [os_version];
+      this.checkQuery.field = "group_id";
+      this.group_id_a = "";
+      this.group_id_b = "";
+      for (var i = 0; i < this.compare_object.length; i++) {
+        this.compare_object[i].group_id = "";
+      }
+
+      QueryField(this.checkQuery).then((res) => {
+        this.groupData = res;
+      });
+    },
+    sleep(time) {
+      return new Promise((resolve) => setTimeout(resolve, time));
+    },
+    get_Echarts(echart_data) {
+      for (var i = 0; i < echart_data.length; i++) {
+        this.getEchart(i, echart_data);
+      }
+    },
+    getEchart(index, echart_data) {
+      this.sleep(200 * index).then(() => {
+        var echart_title = echart_data[index].title;
+        var echart_params = echart_data[index].test_params;
+
+        this.drawEchart(
+          echart_title,
+          echart_params,
+          index,
+          "average",
+          "line",
+          echart_data[index].datas.average
+        );
+
+        this.drawEchart(
+          echart_title,
+          echart_params,
+          index,
+          "change",
+          "bar",
+          echart_data[index].datas.change
+        );
+      });
+    },
+    drawEchart(
+      echart_title,
+      echart_params,
+      index,
+      data_type,
+      echart_type,
+      e_data
+    ) {
+      var echart_id =
+        data_type +
+        "_" +
+        echart_title.replace(".", "_") +
+        "_" +
+        index +
+        "_" +
+        echart_params.replace(/\.|\s/g, "_");
+
+      if (e_data.length == 0) {
+        return;
+      }
+      var myChart = echarts.init(document.getElementById(echart_id));
+
+      var option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+
+          formatter(params) {
+            var res = "<p>x_value: " + params[0].name + "</p>";
+            var s_name;
+            var average;
+            var tmp;
+
+            for (var i = 0; i < params.length; i++) {
+              s_name = "<p>" + params[i].seriesName + "</p>";
+              tmp = params[i].data;
+              if (s_name.includes("vs")) {
+                tmp = tmp + "%";
+              }
+              average = "<p>" + data_type + ":" + tmp + "</p>";
+              res += "</br>" + s_name + average;
+            }
+            return res;
+          },
+        },
+        title: {
+          text: echart_title,
+        },
+        legend: {
+          data: this.getSeriesNames(e_data),
+        },
+        xAxis: {
+          data: e_data[0].x_params,
+          axisLabel: {
+            show: true,
+            //            interval: 0,
+            rotate: 40,
+            textStyle: {
+              color: "#333",
+            },
+          },
+        },
+        yAxis: {
+          axisLabel: {
+            formatter: this.y_formatter(e_data),
+            textStyle: {
+              color: "#333",
+            },
+          },
+        },
+
+        grid: {
+          left: "15%",
+        },
+      };
+      var series = this.renderSeries(e_data, echart_type);
+      option.series = series;
+      option && myChart.setOption(option, true); //绘图
+    },
+    y_formatter(e_data) {
+      var SeriesNames = this.getSeriesNames(e_data);
+      if (SeriesNames[0].includes("vs")) {
+        return "{value}%";
+      }
+    },
+    queryCharts() {
+      this.clean_data();
+      var os_version = [];
+      if (this.os_version != "") {
+        os_version.push(this.os_version);
+      }
+      var group_ids = [];
+      if (this.group_id_a != "") {
+        group_ids.push(this.group_id_a);
+      }
+      if (this.group_id_b != "") {
+        group_ids.push(this.group_id_b);
+      }
+      for (var i = 0; i < this.compare_object.length; i++) {
+        var every_group_id = this.compare_object[i].group_id;
+        if (every_group_id != "") {
+          group_ids.push(every_group_id);
+        }
+      }
+
+      var series = [];
+      for (i = 0; i < group_ids.length; i++) {
+        series.push({ group_id: group_ids[i] });
+      }
+
+      if (this.suite === "lmbench3") {
+        this.lmbench_data_a.QueryData.filter.os_version = os_version;
+        this.lmbench_data_b.QueryData.filter.os_version = os_version;
+        this.lmbench_data_c.QueryData.filter.os_version = os_version;
+        this.lmbench_data_d.QueryData.filter.os_version = os_version;
+        this.lmbench_data_e.QueryData.filter.os_version = os_version;
+        this.lmbench_data_f.QueryData.filter.os_version = os_version;
+
+        this.lmbench_data_a.QueryData.filter.group_id = group_ids;
+        this.lmbench_data_b.QueryData.filter.group_id = group_ids;
+        this.lmbench_data_c.QueryData.filter.group_id = group_ids;
+        this.lmbench_data_d.QueryData.filter.group_id = group_ids;
+        this.lmbench_data_e.QueryData.filter.group_id = group_ids;
+        this.lmbench_data_f.QueryData.filter.group_id = group_ids;
+
+        if (group_ids.length == 0) {
+          this.lmbench_data_a.QueryData.max_series_num = 2;
+          this.lmbench_data_b.QueryData.max_series_num = 2;
+          this.lmbench_data_c.QueryData.max_series_num = 2;
+          this.lmbench_data_d.QueryData.max_series_num = 2;
+          this.lmbench_data_f.QueryData.max_series_num = 2;
+          this.lmbench_data_f.QueryData.max_series_num = 2;
+
+          this.lmbench_data_a.QueryData.series = ["group_id"];
+          this.lmbench_data_b.QueryData.series = ["group_id"];
+          this.lmbench_data_c.QueryData.series = ["group_id"];
+          this.lmbench_data_d.QueryData.series = ["group_id"];
+          this.lmbench_data_f.QueryData.series = ["group_id"];
+          this.lmbench_data_f.QueryData.series = ["group_id"];
+        } else {
+          this.lmbench_data_a.QueryData.max_series_num = -1;
+          this.lmbench_data_b.QueryData.max_series_num = -1;
+          this.lmbench_data_c.QueryData.max_series_num = -1;
+          this.lmbench_data_d.QueryData.max_series_num = -1;
+          this.lmbench_data_f.QueryData.max_series_num = -1;
+          this.lmbench_data_f.QueryData.max_series_num = -1;
+
+          this.lmbench_data_a.QueryData.series = series;
+          this.lmbench_data_b.QueryData.series = series;
+          this.lmbench_data_c.QueryData.series = series;
+          this.lmbench_data_d.QueryData.series = series;
+          this.lmbench_data_f.QueryData.series = series;
+          this.lmbench_data_f.QueryData.series = series;
+        }
+        this.getData(this.lmbench_data_a);
+        this.sleep(50).then(() => {
+          this.getData(this.lmbench_data_b);
+        });
+        this.sleep(500).then(() => {
+          this.getData(this.lmbench_data_c);
+        });
+        this.sleep(1000).then(() => {
+          this.getData(this.lmbench_data_d);
+        });
+        this.sleep(1000).then(() => {
+          this.getData(this.lmbench_data_e);
+        });
+        this.sleep(2000).then(() => {
+          this.getData(this.lmbench_data_f);
+        });
+      }
+      if (this.suite === "unixbench") {
+        this.unixbench_data.QueryData.filter.os_version = os_version;
+        this.unixbench_data.QueryData.filter.group_id = group_ids;
+        if (group_ids.length == 0) {
+          this.unixbench_data.QueryData.max_series_num = 2;
+          this.unixbench_data.QueryData.series = ["group_id"];
+        } else {
+          this.unixbench_data.QueryData.max_series_num = -1;
+          this.unixbench_data.QueryData.series = series;
+        }
+        this.getData(this.unixbench_data);
+      }
+      if (this.suite === "libmicro") {
+        this.libmicro_data.QueryData.filter.os_version = os_version;
+        this.libmicro_data.QueryData.filter.group_id = group_ids;
+        if (group_ids.length == 0) {
+          this.libmicro_data.QueryData.max_series_num = 2;
+          this.libmicro_data.QueryData.series = ["group_id"];
+        } else {
+          this.libmicro_data.QueryData.max_series_num = -1;
+          this.libmicro_data.QueryData.series = series;
+        }
+        this.getData(this.libmicro_data);
+      }
+      if (this.suite === "stream") {
+        this.stream_data.QueryData.filter.os_version = os_version;
+        this.stream_data.QueryData.filter.group_id = group_ids;
+        if (group_ids.length == 0) {
+          this.stream_data.QueryData.max_series_num = 2;
+          this.stream_data.QueryData.series = ["group_id"];
+        } else {
+          this.stream_data.QueryData.max_series_num = -1;
+          this.stream_data.QueryData.series = series;
+        }
+        this.getData(this.stream_data);
+      }
+      if (this.suite === "fio-basic") {
+        this.fio_data.QueryData.filter.os_version = os_version;
+        this.fio_data_b.QueryData.filter.os_version = os_version;
+        this.fio_data_c.QueryData.filter.os_version = os_version;
+
+        this.fio_data.QueryData.filter.group_id = group_ids;
+        this.fio_data_b.QueryData.filter.group_id = group_ids;
+        this.fio_data_c.QueryData.filter.group_id = group_ids;
+        if (group_ids.length == 0) {
+          this.fio_data.QueryData.max_series_num = 2;
+          this.fio_data_b.QueryData.max_series_num = 2;
+          this.fio_data_c.QueryData.max_series_num = 2;
+
+          this.fio_data.QueryData.series = ["group_id"];
+          this.fio_data_b.QueryData.series = ["group_id"];
+          this.fio_data_c.QueryData.series = ["group_id"];
+        } else {
+          this.fio_data.QueryData.max_series_num = -1;
+          this.fio_data_b.QueryData.max_series_num = -1;
+          this.fio_data_c.QueryData.max_series_num = -1;
+
+          this.fio_data.QueryData.series = series;
+          this.fio_data_b.QueryData.series = series;
+          this.fio_data_c.QueryData.series = series;
+        }
+        this.getData(this.fio_data);
+        this.sleep(200).then(() => {
+          this.getData(this.fio_data_b);
+        });
+        this.sleep(400).then(() => {
+          this.getData(this.fio_data_c);
+        });
+      }
+      if (this.suite === "netperf") {
+        this.netperfb_data.QueryData.filter.os_version = os_version;
+        this.netperfa_data.QueryData.filter.os_version = os_version;
+
+        this.netperfb_data.QueryData.filter.group_id = group_ids;
+        this.netperfa_data.QueryData.filter.group_id = group_ids;
+        if (group_ids.length == 0) {
+          this.netperfb_data.QueryData.max_series_num = 2;
+          this.netperfa_data.QueryData.max_series_num = 2;
+
+          this.netperfb_data.QueryData.series = ["group_id"];
+          this.netperfa_data.QueryData.series = ["group_id"];
+        } else {
+          this.netperfb_data.QueryData.max_series_num = -1;
+          this.netperfa_data.QueryData.max_series_num = -1;
+
+          this.netperfb_data.QueryData.series = series;
+          this.netperfa_data.QueryData.series = series;
+        }
+        this.getData(this.netperfb_data);
+
+        this.sleep(200).then(() => {
+          this.getData(this.netperfa_data);
+        });
+      }
+    },
+    tableRowStyle({ rowIndex }) {
+      let rowBackground = {};
+      if (rowIndex === 0) {
+        rowBackground.background = "#eeeeee";
+      }
+      return rowBackground;
+    },
+    tableCellStyle({ row, column }) {
+      let cellBackground = { color: "#000" };
+
+      for (var k in row) {
+        if (typeof row[k] == "string" && row[k].includes("vs")) {
+          var content = row[column.label];
+          if (typeof content == "string") {
+            if (content.includes("vs")) {
+              cellBackground.background = "yellow";
+              return cellBackground;
+            } else if (content.replace("%", "") > 0) {
+              cellBackground.background = "green";
+              return cellBackground;
+            } else if (content.replace("%", "") < 0) {
+              cellBackground.background = "red";
+              return cellBackground;
+            }
+          }
+        }
+      }
+      return cellBackground;
+    },
+    setStyle(worksheet) {
+      worksheet["!cols"] = [{ wpx: 300 }];
+
+      for (var k in worksheet) {
+        if (k.includes("!") || worksheet[k].v === "") {
+          continue;
+        }
+        worksheet[k].s = {
+          border: {
+            top: {
+              style: "thin",
+            },
+            bottom: {
+              style: "thin",
+            },
+            left: {
+              style: "thin",
+            },
+            right: {
+              style: "thin",
+            },
+          },
+        };
+        if (k.includes("1")) {
+          worksheet[k].s.alignment = {
+            horizontal: "center",
+            vertical: "center",
+            wrapText: true,
+          };
+          worksheet[k].s.fill = {
+            bgColor: {
+              indexed: 64,
+            },
+            fgColor: {
+              rgb: "92d050",
+            },
+          };
+        }
+        if (worksheet[k]["t"] == "s" && worksheet[k]["v"].includes("vs")) {
+          worksheet[k].s.alignment = {
+            wrapText: true,
+          };
+          worksheet[k].s.fill = {
+            bgColor: {
+              indexed: 64,
+            },
+            fgColor: {
+              rgb: "FFFF00",
+            },
+          };
+        } else {
+          var col_head = "A" + k.replace(/[A-Z]{1,}/, "");
+          if (worksheet[col_head].v.includes("vs")) {
+            worksheet[k].z = "0.00%";
+            if (worksheet[k].v > 0.1) {
+              worksheet[k].s.fill = {
+                bgColor: {
+                  indexed: 64,
+                },
+                fgColor: {
+                  rgb: "00B050",
+                },
+              };
+            }
+            if (worksheet[k].v < -0.1) {
+              worksheet[k].s.fill = {
+                bgColor: {
+                  indexed: 64,
+                },
+                fgColor: {
+                  rgb: "FF0000",
+                },
+              };
+            }
+          }
+        }
+      }
+    },
+    getExcel() {
+      var c_children = document.getElementById("container").children;
+      let wb = XLSX.utils.book_new();
+      var used_name = {};
+
+      if (c_children.length < 2) {
+        this.$message("导出失败");
+        return;
+      }
+
+      for (var i = 2; i < c_children.length; i++) {
+        var el_table = c_children[i].children[2];
+        let sheet = XLSX.utils.table_to_sheet(el_table);
+        this.setStyle(sheet);
+        var sheet_name = sheet["A1"].v;
+        if (sheet_name == "Function") sheet_name = this.suite;
+        if (used_name[sheet_name] == null) {
+          used_name[sheet_name] = 1;
+        } else {
+          used_name[sheet_name]++;
+        }
+        if (used_name[sheet_name] > 1) {
+          sheet_name = sheet_name + (used_name[sheet_name] - 1);
+        }
+        XLSX.utils.book_append_sheet(wb, sheet, sheet_name);
+      }
+      let wbout = XLSXS.write(wb, {
+        book_Type: "xlsx",
+        bookSST: false,
+        type: "binary",
+      });
+      filesaver.saveAs(
+        new Blob([this.s2ab(wbout)], { type: "application/octet-stream" }),
+        "测试数据.xlsx"
+      );
+    },
+    s2ab(s) {
+      let buf = null;
+
+      if (typeof ArrayBuffer !== "undefined") {
+        buf = new ArrayBuffer(s.length);
+        let view = new Uint8Array(buf);
+
+        for (let i = 0; i != s.length; ++i) {
+          view[i] = s.charCodeAt(i) & 0xff;
+        }
+
+        return buf;
+      }
+
+      buf = new Array(s.length);
+
+      for (let i = 0; i != s.length; ++i) {
+        buf[i] = s.charCodeAt(i) & 0xff;
+      }
+
+      return buf;
+    },
+    stream_filter(s_headers) {
+      var checkedHeaders;
+      checkedHeaders = this.stream_selected;
+      var headers = [];
+      headers.push(s_headers[0]);
+
+      var tmp = checkedHeaders.filter(function (v) {
+        return s_headers.indexOf(v) > -1;
+      });
+      headers = headers.concat(tmp);
+      return headers;
+    },
+    netperf_filter(s_headers) {
+      var checkedHeaders;
+      checkedHeaders = this.netperf_selected;
+      var headers = [];
+      headers.push(s_headers[0]);
+
+      var tmp = checkedHeaders.filter(function (v) {
+        return s_headers.indexOf(v) > -1;
+      });
+      headers = headers.concat(tmp);
+      return headers;
+    },
+    unixbench_filter(s_headers) {
+      var checkedHeaders;
+      checkedHeaders = this.unixbench_selected;
+      var headers = [];
+      headers.push(s_headers[0]);
+
+      var tmp = checkedHeaders.filter(function (v) {
+        return s_headers.indexOf(v) > -1;
+      });
+      headers = headers.concat(tmp);
+      return headers;
+    },
+    lmbench3_filter(s_headers) {
+      var checkedHeaders;
+      checkedHeaders = this.lmbench3_selected;
+      var headers = [];
+      headers.push(s_headers[0]);
+
+      var tmp = checkedHeaders.filter(function (v) {
+        return s_headers.indexOf(v) > -1;
+      });
+      headers = headers.concat(tmp);
+      return headers;
+    },
+    libmicro_filter(s_headers) {
+      var checkedHeaders;
+      checkedHeaders = this.libmicro_selected;
+      var headers = [];
+      headers.push(s_headers[0]);
+
+      var tmp = checkedHeaders.filter(function (v) {
+        return s_headers.indexOf(v) > -1;
+      });
+      headers = headers.concat(tmp);
+      return headers;
+    },
+    fio_filter(s_headers) {
+      var checkedHeaders;
+      checkedHeaders = this.fio_selected;
+      var headers = [];
+      headers.push(s_headers[0]);
+
+      var tmp = checkedHeaders.filter(function (v) {
+        return s_headers.indexOf(v) > -1;
+      });
+      headers = headers.concat(tmp);
+      return headers;
+    },
+    getTransferData() {
+      this.transfer_data = [];
+      this.transfer_chosen = [];
+      for (var i = 0; i < this.t_headers.length; i++) {
+        this.transfer_data.push({
+          key: i,
+          label: this.t_headers[i],
+        });
+        this.transfer_chosen.push(i);
+      }
+    },
+    transferChange() {
+      if (this.suite == "stream") {
+        this.stream_selected = [];
+        for (var i = 0; i < this.transfer_chosen.length; i++) {
+          var index = this.transfer_chosen[i];
+          this.stream_selected[i] = this.transfer_data[index].label;
+        }
+      } else if (this.suite == "netperf") {
+        this.netperf_selected = [];
+        for (i = 0; i < this.transfer_chosen.length; i++) {
+          index = this.transfer_chosen[i];
+          this.netperf_selected[i] = this.transfer_data[index].label;
+        }
+      } else if (this.suite == "unixbench") {
+        this.unixbench_selected = [];
+        for (i = 0; i < this.transfer_chosen.length; i++) {
+          index = this.transfer_chosen[i];
+          this.unixbench_selected[i] = this.transfer_data[index].label;
+        }
+      } else if (this.suite == "lmbench3") {
+        this.lmbench3_selected = [];
+        for (i = 0; i < this.transfer_chosen.length; i++) {
+          index = this.transfer_chosen[i];
+          this.lmbench3_selected[i] = this.transfer_data[index].label;
+        }
+      } else if (this.suite == "libmicro") {
+        this.libmicro_selected = [];
+        for (i = 0; i < this.transfer_chosen.length; i++) {
+          index = this.transfer_chosen[i];
+          this.libmicro_selected[i] = this.transfer_data[index].label;
+        }
+      } else if (this.suite == "fio-basic") {
+        this.fio_selected = [];
+        for (i = 0; i < this.transfer_chosen.length; i++) {
+          index = this.transfer_chosen[i];
+          this.fio_selected[i] = this.transfer_data[index].label;
+        }
+      }
+    },
+    addObject() {
+      var obj = {
+        group_id: "",
+      };
+      this.compare_object.push(obj);
+    },
+    delObject() {
+      this.compare_object.pop();
+    },
+    getHostInfo(testbox) {
+      this.testbox = testbox;
+      getHostInfo({ testbox: testbox }).then((res) => {
+        this.textData = JSON.stringify(res, null, "\t");
+        this.dialogTableVisible = true;
+      });
+    },
+  },
+  computed: {},
+  mounted() {
+    this.getVersionData();
+    this.getTableHeaders();
+    this.getTransferData();
+  },
+};
+</script>
+
+<style lang='less' scoped>
+.input_class {
+  width: 85%;
+}
+.confirm {
+  float: left;
+  margin-left: 30%;
+}
+.containers {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 700px;
+}
+.chart {
+  width: 1000px;
+  height: 720px;
+  margin-bottom: 10px;
+}
+.test-params {
+  margin-left: 100px;
+  margin-bottom: 20px;
+  float: left;
+}
+.el-table.warning-row {
+  background: #0c5c02;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/repos/repos.vue b/src/views/repos/repos.vue
index f32fdcaab14dc3e5e16cc1466380d8567fbfc433..6a934ba226783bd31753e03df2d75376362777d8 100644
--- a/src/views/repos/repos.vue
+++ b/src/views/repos/repos.vue
@@ -1,26 +1,44 @@
 <template>
   <div id="repos">
+    <Header class="main-header"></Header>
     <div class="content">
       <h1 class="title">Repos</h1>
-      <p class="summary">summary</p>
-      <el-row :gutter="10">
-        <el-col :xs="40" :sm="10" :md="10" :lg="8" :xl="3" class="jobs-tips">
-          <span class="page-tips">reports per page</span>
+      <p class="summary">你的开源软件在这里吗？</p>
+      <el-form :inline="true" class="demo-form-inline">
+        <el-form-item label="reports per page" class="select-pages">
           <el-select
             v-model="listQuery.page_size"
             placeholder="请选择"
             size="medium"
+            class="select-page"
             @change="getAllRepos"
           >
             <el-option v-for="item in pageSizeOptions" :key="item" :label="item" :value="item"></el-option>
           </el-select>
-        </el-col>
-      </el-row>
+        </el-form-item>
+        <el-form-item class="search">
+          <el-input
+            v-model="listQuery.git_repo"
+            placeholder="search git_repo"
+            size="medium"
+            @keydown.enter.native="searchRepos"
+            clearable
+            @clear="searchRepos"
+          >
+            <el-button slot="append" icon="el-icon-search" @click="searchRepos"></el-button>
+          </el-input>
+        </el-form-item>
+      </el-form>
       <el-table :data="reposList" stripe class="repos-data">
-        <el-table-column prop="git_repo" label="git_repo"></el-table-column>
+        <el-table-column label="序号" type="index" width="50"></el-table-column>
+        <el-table-column prop="git_repo" label="git_repo">
+          <template slot-scope="scope">
+            <span @click="goTree(scope.row.git_repo)" class="goUrl">{{ scope.row.git_repo }}</span>
+          </template>
+        </el-table-column>
         <el-table-column label="git_url">
           <template slot-scope="scope">
-            <span class="goUrl" @click="goRepos(scope.row.git_url)">{{scope.row.git_url}}</span>
+            <span @click="goRepos(scope.row.git_url)" class="goUrl">{{ scope.row.git_url }}</span>
           </template>
         </el-table-column>
       </el-table>
@@ -31,31 +49,37 @@
         :total="repoData.total"
         class="pagination"
         :pager-count="5"
+        :page-size="listQuery.page_size"
         :small="isSmall"
       ></el-pagination>
     </div>
   </div>
 </template>
 <script>
-import {getAllRepos} from "../../api/repo";
+import { getAllRepos } from "../../api/repo";
+import Header from "@/components/Header";
 export default {
   name: "Repos",
+  components: {
+    Header
+  },
   data() {
     return {
       listQuery: {
+        git_repo: null,
         page_size: 10,
-        page_num: 1,
+        page_num: 1
       },
       repoData: {},
       reposList: [],
       pageSizeOptions: [10, 20, 30],
       isSmall: false,
-      currentPage:1
+      currentPage: 1
     };
   },
   methods: {
     getAllRepos() {
-      getAllRepos(this.listQuery).then((res) => {
+      getAllRepos(this.listQuery).then(res => {
         this.repoData = res;
         this.reposList = this.repoData.repos;
         if (this.isMobile()) {
@@ -65,8 +89,33 @@ export default {
         }
       });
     },
+    searchRepos() {
+      var routeQuery = null;
+      if (this.listQuery.git_repo) {
+        routeQuery = { git_repo: this.listQuery.git_repo };
+      }
+      this.$router.push({
+        path: this.$route.path,
+        query: routeQuery
+      });
+      this.getAllRepos();
+    },
+    goTree(item) {
+      this.$router.push({
+        path: "/tree",
+        query: {
+          upstream_repo: item
+        }
+      });
+    },
     goRepos(src) {
-      window.location.href = src;
+      let srcReg = /^git/;
+      if (srcReg.test(src)) {
+        src = src.replace(/^git/, "https");
+        window.open(src, "_blank");
+      } else {
+        window.open(src, "_blank");
+      }
     },
     handleCurrentChange(val) {
       this.listQuery.page_num = val;
@@ -77,14 +126,15 @@ export default {
         /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
       );
       return flag;
-    },
+    }
   },
   mounted() {
+    this.listQuery.git_repo = this.$route.query.git_repo;
     this.getAllRepos();
-  },
+  }
 };
 </script>
-<style>
+<style lang="less" scoped>
 .page-tips {
   font-weight: bold;
   margin-right: 2%;
@@ -93,4 +143,19 @@ export default {
   padding: 2% 0;
   line-height: 30px;
 }
+.search {
+  margin-left: 92px;
+  @media screen and (max-width: 1000px) {
+    margin-left: 0;
+  }
+}
+.select-page {
+  width: 113px;
+}
+/deep/.el-form-item__label {
+  font-weight: bold;
+}
+/deep/.el-table th > .cell {
+  font-weight: bold;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/testMatrix/testMatrix.vue b/src/views/testMatrix/testMatrix.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e2fa0d565b610896b0600e000f7d191154206702
--- /dev/null
+++ b/src/views/testMatrix/testMatrix.vue
@@ -0,0 +1,169 @@
+<template>
+  <div id="test">
+    <Header class="main-header"></Header>
+    <div class="content">
+      <h1 class="title">Test Matrix</h1>
+      <p class="summary">多架构多系统测试结果对比</p>
+      <div style="margin-top: 15px;margin-bottom:50px;text-align: center;">
+        <el-input placeholder="group_id" v-model="groupId" class="input-with-select" >
+            <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
+        </el-input>
+      </div>
+
+      <el-table
+        :data="tableData"
+        border
+        style="width:58%;margin:auto"
+        :header-cell-style="{background:'#f8f8ff','text-align':'center'}"
+        :cell-style="cellClsNm"
+        :cell-class-name="tableCellClassName"
+        @cell-click="cell_result">
+        <el-table-column
+        prop="combination"
+        label="组合"
+        align="center">
+        </el-table-column>
+        <el-table-column
+        prop="build"
+        label="构建"
+        width="150"
+        align="center">
+            <template slot-scope="scope">
+                <img :src="scope.row.build"/>
+            </template>
+        </el-table-column>
+        <el-table-column
+        prop="compatibility"
+        label="兼容性"
+        width="150"
+        align="center">
+            <template slot-scope="scope_comp">
+                <img :src="scope_comp.row.compatibility"/>
+            </template>
+        </el-table-column>
+        <el-table-column
+        prop="function"
+        label="功能"
+        width="150"
+        align="center">
+            <template slot-scope="scope_func">
+                <img :src="scope_func.row.function"/>
+            </template>
+        </el-table-column>
+        <!-- <el-table-column
+        prop="performance"
+        label="性能"
+        width="150"
+        align="center">
+             <template slot-scope="scope_perf">
+                <img :src="scope_perf.row.performance"/> 
+             </template> 
+        </el-table-column> -->
+      </el-table>
+      </div>
+    </div>
+</template>
+<script>
+import Header from "@/components/Header";
+import { testMatrix } from "../../api/testMatrix.js";
+export default {
+  name: "testMatrix",
+  components: {
+    Header
+  },
+  data() {
+      return {
+          groupId:'',
+          response:[],
+          tableData:[]
+      }
+    
+  },
+  methods: {
+      cellClsNm(row){
+          if(row.columnIndex=="0"){
+              return 'background:#f8f8ff'
+          }
+      },
+      search:function(){
+          let data={group_id:this.groupId}
+          if(this.groupId==''){
+            return;
+          }
+          testMatrix(data).then( res => {
+              this.response=res
+              this.toTable();
+          })          
+      },
+      toTable:function(){
+          this.tableData=[];
+          for(var i in this.response){
+              var tmp=this.response[i];
+              let item={
+                  combination : tmp.os + "\u3000" + tmp.os_version + "\u3000 X \u3000 " + tmp.os_arch,
+                  build: tmp.build_job_health=="success" ? require("../../assets/success.png"):require("../../assets/fail.png"),
+                  compatibility: !('install_job_health' in tmp) ? require("../../assets/null.png") :tmp.install_job_health=="success" ? require("../../assets/success.png"):require("../../assets/fail.png"),
+                  function:!('func_job_health' in tmp) ? require("../../assets/null.png") :tmp.func_job_health=="success" ? require("../../assets/success.png"):require("../../assets/fail.png"),
+              }
+              this.tableData.push(item)
+          }
+      },
+      cell_result:function(row,column){
+          var href;
+          console.log()
+          if(column.index==1){
+            href="https://api.compass-ci.openeuler.org:20007/"+this.response[row.index].build_id;
+            window.open(href,'_blank');
+          }else if(column.index==2 && ('install_id' in this.response[row.index])){
+            href="https://api.compass-ci.openeuler.org:20007/"+this.response[row.index].install_id;
+            window.open(href,'_blank');
+          }else if(column.index==3 && ('func_job_health' in this.response[row.index])){
+            href="https://api.compass-ci.openeuler.org:20007/"+this.response[row.index].build_id;
+            window.open(href,'_blank');
+          }
+      },
+      tableCellClassName({row,column,rowIndex,columnIndex}){
+          row.index=rowIndex;
+          column.index=columnIndex;
+      }
+  }
+};
+</script>
+<style lang="less" scoped>
+img{
+    height: 20px;
+    width: 20px;
+}
+.input-with-select {
+  background-color: #fff;
+  width: 50%;
+  align-items: center;
+}
+.div-table {
+    width: auto;
+}
+
+.page-tips {
+  font-weight: bold;
+  margin-right: 2%;
+}
+.jobs-tips {
+  padding: 2% 0;
+  line-height: 30px;
+}
+.search {
+  margin-left: 92px;
+  @media screen and (max-width: 1000px) {
+    margin-left: 0;
+  }
+}
+.select-page {
+  width: 113px;
+}
+/deep/.el-form-item__label {
+  font-weight: bold;
+}
+/deep/.el-table th > .cell {
+  font-weight: bold;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/tree/tree.vue b/src/views/tree/tree.vue
index fc40147abe7ff82ba3b1f7478364044ce7b7a5eb..a216995276c57f5fc6ba1bdeb157f2150880f6de 100644
--- a/src/views/tree/tree.vue
+++ b/src/views/tree/tree.vue
@@ -1,26 +1,34 @@
 <template>
   <div id="tree">
+    <Header class="main-header"></Header>
     <div class="content">
       <h1 class="title">Tree</h1>
-      <p class="summary">summary</p>
+      <p class="summary">代码仓的branch信息，都在这里了</p>
       <div class="tree-header-tips">
         <el-form label-position="left" class="tree-header-tips">
           <el-form-item label="git repo">
-            <div>{{banner.repo?banner.repo:''}}</div>
+            <div>{{ banner.repo ? banner.repo : "" }}</div>
           </el-form-item>
           <el-form-item label="git url">
-            <div class="goUrl" @click="goGit(banner.git_url)">{{banner.git_url}}</div>
+            <div class="goUrl" @click="goBlank(banner.git_url)">
+              {{ banner.git_url }}
+            </div>
           </el-form-item>
-          <el-form-item label="branches">
-            <template v-for="item in banner.branch">
-              <span :key="item" class="branch">{{item}}</span>
+          <el-form-item label="upstream_branch">
+            <template v-for="item in banner.upstream_branch">
+              <span :key="item" class="branch">{{ item }}</span>
             </template>
           </el-form-item>
           <el-form-item label="jobs"></el-form-item>
         </el-form>
       </div>
       <el-table :data="tableData" stripe class="jobs-data">
-        <el-table-column :label="item" :key="index" v-for="(item,index) in tableHead">
+        <el-table-column label="序号" type="index" width="50"></el-table-column>
+        <el-table-column
+          :label="item"
+          :key="index"
+          v-for="(item, index) in tableHead"
+        >
           <template slot-scope="scope">
             <el-tooltip
               class="item"
@@ -29,38 +37,44 @@
               placement="top-start"
               :disabled="toolDisabled"
             >
-              <div slot="content"  v-if="item == 'error_ids'">
-                <template v-for=" (ids,idsIndex) in scope.row[item]">
-                  <p :key="idsIndex">
-                    {{ids+','}}
-                  </p>
+              <div slot="content" v-if="item == 'error_ids'">
+                <template v-for="(ids, idsIndex) in scope.row[item]">
+                  <p :key="idsIndex">{{ ids + "," }}</p>
                 </template>
               </div>
-              <div slot="content"  v-else>{{scope.row[item]}}</div>
+              <div slot="content" v-else>{{ scope.row[item] }}</div>
               <span
                 class="goUrl wrap"
-                @click="goTestBox(testBoxUrl+scope.row[item])"
-                v-if="item ==='testbox'"
+                @click="goBlank(testBoxUrl + checkStr(scope.row.testbox))"
+                v-if="item === 'testbox'"
                 @mouseover="showtip(item)"
-              >{{scope.row[item]}}</span>
+                >{{ scope.row[item] }}</span
+              >
               <span
                 class="goUrl wrap"
-                @click="goResult(resultUrl+scope.row.suite +'/'+ scope.row.id)"
-                v-else-if="item ==='job_state'"
+                @click="goBlank(resultUrl + scope.row.result_root + '/')"
+                v-else-if="item === 'job_state'"
                 @mouseover="showtip(item)"
-              >{{scope.row[item]}}</span>
+                >{{ scope.row[item] }}</span
+              >
               <span
-                class="goUrl wrap"
-                @click="goTree(scope.row[item])"
-                v-else-if="item =='upstream_repo'"
+                class="wrap"
+                v-else-if="item == 'upstream_repo'"
+                @mouseover="showtip(item)"
+                >{{ scope.row[item] }}</span
+              >
+              <span
+                class="wrap"
+                v-else-if="item == 'error_ids'"
                 @mouseover="showtip(item)"
-              >{{scope.row[item]}}</span>
-              <span class="wrap" v-else-if="item =='error_ids'" @mouseover="showtip(item)">
+              >
                 <template v-for="item in scope.row[item]">
-                  <span :key="item">{{item}}</span>
+                  <span :key="item">{{ item }}</span>
                 </template>
               </span>
-              <span class="wrap" v-else @mouseover="showtip(item)">{{scope.row[item]}}</span>
+              <span class="wrap" v-else @mouseover="showtip(item)">{{
+                scope.row[item]
+              }}</span>
             </el-tooltip>
           </template>
         </el-table-column>
@@ -73,6 +87,7 @@
           :total="jobsQuery.total"
           class="pagination"
           :pager-count="5"
+          :page-size="listQuery.page_size"
           :small="isSmall"
         ></el-pagination>
       </div>
@@ -81,13 +96,15 @@
 </template>
 <script>
 import { getJobs } from "../../api/jobs.js";
-import {BASEURLRESULT, BASEURLTESTBOX} from "../../utils/baseUrl.js";
+import { BASEURLTESTBOX, BASEURLRESULT } from "../../utils/baseUrl.js";
+import Header from "@/components/Header";
 export default {
   name: "Tree",
-  components: {},
+  components: {
+    Header,
+  },
   data() {
     return {
-      pageSizeOptions: [10, 20, 30],
       tableData: [],
       tableHead: [],
       currentPage: 1,
@@ -113,7 +130,9 @@ export default {
         item == "upstream_commit" ||
         item == "start_time" ||
         item == "id" ||
-        item == "error_ids"
+        item == "error_ids" ||
+        item == "upstream_branch" ||
+        item == "suite"
       ) {
         this.toolDisabled = false;
       } else {
@@ -128,14 +147,8 @@ export default {
         },
       });
     },
-    goTestBox(src) {
-      window.location.href = src;
-    },
-    goResult(src) {
-      window.location.href = src;
-    },
-    goGit(src) {
-      window.location.href = src;
+    goBlank(src) {
+      window.open(src, "_blank");
     },
     getJobs() {
       getJobs(this.listQuery).then((res) => {
@@ -150,6 +163,23 @@ export default {
         }
       });
     },
+    checkStr(str) {
+      let resultStr = "";
+      let strReg = /^vm/;
+      if (strReg.test(str)) {
+        resultStr = str.split("--")[0];
+      } else {
+        let strArr = str.split("--");
+        let firstStr = strArr[0];
+        let sedStr = strArr[1];
+        if (sedStr) {
+          resultStr = firstStr + "--" + sedStr.split("-")[0];
+        } else {
+          resultStr = firstStr;
+        }
+      }
+      return resultStr;
+    },
     handleCurrentChange(val) {
       this.listQuery.page_num = val;
       this.getJobs();
@@ -171,7 +201,7 @@ export default {
   },
 };
 </script>
-<style lang='scss' scoped>
+<style lang="less" scoped>
 .tree-infos {
   padding: 10px 0;
 }
@@ -188,4 +218,7 @@ export default {
     width: 100%;
   }
 }
-</style>
\ No newline at end of file
+/deep/.el-table th > .cell {
+  font-weight: bold;
+}
+</style>
diff --git a/start b/start
new file mode 100755
index 0000000000000000000000000000000000000000..7c8f86dfe876cd73b6eac59e0144782443a91de4
--- /dev/null
+++ b/start
@@ -0,0 +1,18 @@
+#!/bin/bash
+# SPDX-License-Identifier: MulanPSL-2.0+
+# Copyright (c) 2020 Huawei Technologies Co., Ltd. All rights reserved.
+
+. $CCI_SRC/container/defconfig.sh
+docker_rm web
+
+cmd=(
+	docker run
+	--restart=always
+	--name web
+	-p 11302:8080
+	-v /etc/localtime:/etc/localtime:ro
+	-d
+	web
+)
+
+"${cmd[@]}"
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..2bb3e7d240687ed8c5aadcb4e65dcc6fa81f6eac
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,23 @@
+/**
+ * @file api文档入口
+ * */
+module.exports = {
+    chainWebpack: config => {
+        config.plugins.delete('prefetch');
+    },
+    pwa: {
+        iconPaths: {
+            favicon32: null,
+            favicon16: null,
+            appleTouchIcon: null,
+            maskIcon: null,
+            msTileImage: null
+        }
+    },
+    productionSourceMap: false,
+    configureWebpack: {
+        externals: {
+            './cptable': 'var cptable'
+        },
+    }
+};