From 9a8b2a6de8e8b5063c59c1aff93b6245f400677d Mon Sep 17 00:00:00 2001
From: qz_cx <wangqingzheng@kylinos.cn>
Date: Mon, 22 Sep 2025 14:56:57 +0800
Subject: [PATCH] Add multi data display function to the environmental
 information table

---
 .../src/components/TableHeader.vue            |  1 +
 templates/front-project/src/router/index.js   |  7 +-
 .../front-project/src/views/EnvTable.vue      | 34 ++++++---
 .../front-project/src/views/ProjectTable.vue  | 76 ++++++++++---------
 4 files changed, 65 insertions(+), 53 deletions(-)

diff --git a/templates/front-project/src/components/TableHeader.vue b/templates/front-project/src/components/TableHeader.vue
index 27507e3..7400f46 100644
--- a/templates/front-project/src/components/TableHeader.vue
+++ b/templates/front-project/src/components/TableHeader.vue
@@ -15,6 +15,7 @@
         </el-button>
         <el-button type="primary" @click="$router.back()">返回上一步</el-button>
         <el-button type="primary" @click="goToHome">返回首页</el-button>
+        <el-button type="success" @click="goTo('env')">环境信息</el-button>
         <el-button :type="buttonType('stream')" @click="goTo('stream')" :disabled="toDisabled('stream')">stream</el-button>
         <el-button :type="buttonType('lmbench')" @click="goTo('lmbench')" :disabled="toDisabled('lmbench')">lmbench</el-button>
         <el-button :type="buttonType('unixbench')" @click="goTo('unixbench')" :disabled="toDisabled('unixbench')">unixbench</el-button>
diff --git a/templates/front-project/src/router/index.js b/templates/front-project/src/router/index.js
index 28d2c43..bc3c454 100644
--- a/templates/front-project/src/router/index.js
+++ b/templates/front-project/src/router/index.js
@@ -9,11 +9,6 @@ import {createRouter, createWebHistory} from 'vue-router'
 
 
 const routes = [
-    {
-        name: 'Test',
-        path: '/test',
-        component: () => import('@/views/test_1'),
-    },
     {
         name: 'Home',
         path: '/',
@@ -26,7 +21,7 @@ const routes = [
     },
     {
         name: 'env',
-        path: '/env/:baseId/',
+        path: '/env/:baseId/:comparsionIds?',
         component: () => import('@/views/EnvTable'),
         props: true,
     },
diff --git a/templates/front-project/src/views/EnvTable.vue b/templates/front-project/src/views/EnvTable.vue
index 7cda66c..af326de 100644
--- a/templates/front-project/src/views/EnvTable.vue
+++ b/templates/front-project/src/views/EnvTable.vue
@@ -10,10 +10,18 @@
     <Header :tableDatas="tableDatas" :dataName="dataName" @data-loaded="handleDataLoaded"/>
     <div style="overflow-x: auto;">
       <el-table :data="tableDatas" border :span-method="objectSpanMethod" style="overflow-x: auto;"
-                :show-header="false">
+                :show-header="false"  :row-style="{ height: '50px' }">
         <template v-for="i in numColumns" :key="i">
-          <!--        <el-table-column :prop="`column${i}`" align="center" :width="i === 1 ? '100px' : i === 2 ? '150px' : i === 3 ? '250px' : null"></el-table-column>-->
-          <el-table-column :prop="`column${i}`" align="center"></el-table-column>
+          <el-table-column :prop="`column${i}`" align="center"
+                           :width="i === 1 ? '100px' : i === 2 ? '150px' : i === 3 ? '250px' : null">
+            <template #default="{row}">
+              <el-tooltip :content="row[`column${i}`]" effect="light">
+                <div style="height: 30px">{{row[`column${i}`] && row[`column${i}`].toString() || '' }}</div>
+
+              </el-tooltip>
+            </template>
+          </el-table-column>
+          <!--          <el-table-column :prop="`column${i}`" align="center"></el-table-column>-->
         </template>
       </el-table>
     </div>
@@ -34,26 +42,31 @@ export default {
   },
   data() {
     return {
-      numColumns: 4,
+      numColumns: 0,
       tableDatas: [],
       dataName: this.$route.name,
+      paramsData: {
+        env_id: this.$route.params.baseId,
+        comparsionIds: this.$route.params.comparsionIds,
+      },
     }
   },
   created() {
-    env({'env_id': this.$route.params.baseId}).then((response) => {
+    env(this.paramsData).then((response) => {
       this.tableDatas = response.data.data.data
+      this.numColumns = Object.keys(this.tableDatas[0]).length
     });
   },
   methods: {
     handleDataLoaded(value) {
-      console.log(value,111)
+      console.log(value, 111)
       // 在这里处理子组件的数据
     },
 
     // 单元格的处理方法 当前行row、当前列column、当前行号rowIndex、当前列号columnIndex
     objectSpanMethod({rowIndex, columnIndex}) {
       //columnIndex 表示需要合并的列，多列时用 || 隔开
-      if (columnIndex === 0 || columnIndex === 1 ) {
+      if (columnIndex === 0 || columnIndex === 1) {
         const _row = this.filterData(this.tableDatas, columnIndex).one[rowIndex];
         const _col = _row > 0 ? 1 : 0;  // 为0是不执行合并。 为1是从当前单元格开始，执行合并1列
         return {
@@ -78,7 +91,7 @@ export default {
               spanOneArr.push(1);
               concatOne = index;
             }
-          } else if (colIndex === 1){
+          } else if (colIndex === 1) {
             if (item['column2'] === arr[index - 1]['column2']) {
               spanOneArr[concatOne] += 1;
               spanOneArr.push(0);
@@ -101,12 +114,13 @@ export default {
 <style>
 /*对比值的背景色*/
 .green-cell {
-  color:green;
+  color: green;
   background-color: greenyellow;
   /* 其他样式属性 */
 }
+
 .red-cell {
-  color:red;
+  color: red;
   background-color: pink;
   /* 其他样式属性 */
 }
diff --git a/templates/front-project/src/views/ProjectTable.vue b/templates/front-project/src/views/ProjectTable.vue
index 8551f6a..a4dbd7f 100644
--- a/templates/front-project/src/views/ProjectTable.vue
+++ b/templates/front-project/src/views/ProjectTable.vue
@@ -357,22 +357,24 @@ export default {
       }
       const baseData = this.allProjectDatas.find(item => item.env_id === env_id[0])
       if (this.selectedType !== "env") {
-        if (baseData.stream) {
-          this.selectedType = 'stream'
-        } else if (baseData.lmbench) {
-          this.selectedType = 'lmbench'
-        } else if (baseData.unixbench) {
-          this.selectedType = 'unixbench'
-        } else if (baseData.fio) {
-          this.selectedType = 'fio'
-        } else if (baseData.iozone) {
-          this.selectedType = 'iozone'
-        } else if (baseData.jvm2008) {
-          this.selectedType = 'jvm2008'
-        } else if (baseData.cpu2006) {
-          this.selectedType = 'cpu2006'
-        } else if (baseData.cpu2017) {
-          this.selectedType = 'cpu2017'
+        if (this.selectedType === 'stream') {
+          if (baseData.stream) {
+            this.selectedType = 'stream'
+          } else if (baseData.lmbench) {
+            this.selectedType = 'lmbench'
+          } else if (baseData.unixbench) {
+            this.selectedType = 'unixbench'
+          } else if (baseData.fio) {
+            this.selectedType = 'fio'
+          } else if (baseData.iozone) {
+            this.selectedType = 'iozone'
+          } else if (baseData.jvm2008) {
+            this.selectedType = 'jvm2008'
+          } else if (baseData.cpu2006) {
+            this.selectedType = 'cpu2006'
+          } else if (baseData.cpu2017) {
+            this.selectedType = 'cpu2017'
+          }
         }
       }
       this.$router.push({name: this.selectedType, "params": {baseId: env_id[0], comparsionIds: ''}});
@@ -382,37 +384,37 @@ export default {
       const baseData = this.allProjectDatas.find(item => env_id.includes(item.env_id))
       const env_ids = Object.keys(this.compar).map(key => parseInt(key));
       const comparsionIds = env_ids.join(',')
-      if (this.selectedType === "env") {
-        ElMessage.error({message: '环境信息数据不支持对比', duration: 1000});
-        return;
-      } else if (env_id.length !== 1 || env_ids.length === 0) {
+      if (env_id.length !== 1 || env_ids.length === 0) {
         ElMessage.error({message: '请选择一条基准数据和至少一条对比数据', duration: 1000});
         return;
       }
       //判断base数据中的第一个有值的数据
-      if (baseData.stream) {
-        this.selectedType = 'stream'
-      } else if (baseData.lmbench) {
-        this.selectedType = 'lmbench'
-      } else if (baseData.unixbench) {
-        this.selectedType = 'unixbench'
-      } else if (baseData.fio) {
-        this.selectedType = 'fio'
-      } else if (baseData.iozone) {
-        this.selectedType = 'iozone'
-      } else if (baseData.jvm2008) {
-        this.selectedType = 'jvm2008'
-      } else if (baseData.cpu2006) {
-        this.selectedType = 'cpu2006'
-      } else if (baseData.cpu2017) {
-        this.selectedType = 'cpu2017'
+      if (this.selectedType !== "env") {
+        if (this.selectedType === 'stream') {
+          if (baseData.stream) {
+            this.selectedType = 'stream'
+          } else if (baseData.lmbench) {
+            this.selectedType = 'lmbench'
+          } else if (baseData.unixbench) {
+            this.selectedType = 'unixbench'
+          } else if (baseData.fio) {
+            this.selectedType = 'fio'
+          } else if (baseData.iozone) {
+            this.selectedType = 'iozone'
+          } else if (baseData.jvm2008) {
+            this.selectedType = 'jvm2008'
+          } else if (baseData.cpu2006) {
+            this.selectedType = 'cpu2006'
+          } else if (baseData.cpu2017) {
+            this.selectedType = 'cpu2017'
+          }
+        }
       }
       this.$router.push({name: this.selectedType, "params": {baseId: env_id[0], comparsionIds: comparsionIds}});
     },
     mergeData(){
       const env_id = Object.keys(this.base).map(key => parseInt(key));
       const env_ids = Object.keys(this.compar).map(key => parseInt(key));
-      // const comparsionIds = env_ids.join(',')
       if (env_id.length !== 1 || env_ids.length === 0) {
         ElMessage.error({message: '请选择一条基准数据和至少一条对比数据(合并)', duration: 1000});
         return;
-- 
Gitee