From d4d8df5dc4c8fb6f5d56aba15008a72dc34df8cf Mon Sep 17 00:00:00 2001
From: zhanghan2021 <zhanghan@kylinos.cn>
Date: Fri, 10 Nov 2023 17:43:37 +0800
Subject: [PATCH] Add atunes template page

---
 atune/web/src/components/atuneList.vue | 90 ++++++++++++++++++++++++
 atune/web/src/views/Home.vue           | 96 ++++++++++++++++++--------
 2 files changed, 156 insertions(+), 30 deletions(-)
 create mode 100644 atune/web/src/components/atuneList.vue

diff --git a/atune/web/src/components/atuneList.vue b/atune/web/src/components/atuneList.vue
new file mode 100644
index 00000000..0e0518d6
--- /dev/null
+++ b/atune/web/src/components/atuneList.vue
@@ -0,0 +1,90 @@
+<template>
+  
+    <div class="table">
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column prop="tuneName" label="名称" width="180" />
+        <el-table-column prop="prepare" label="环境准备" />
+        <el-table-column prop="tune" label="调优" />
+        <el-table-column prop="restore" label="环境恢复" width="180" />
+      </el-table>
+    </div>
+    <div class="pagination">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[1, 2, 5]"
+        :total="totalItems"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      ></el-pagination>
+    </div>
+  
+
+</template>
+
+<script lang='ts' setup>
+import {  onMounted,ref } from 'vue';
+import { getTuneLists } from '@/api/atune'
+
+const tableData = ref([] as Atune[]);
+const currentPage = ref(1);
+const pageSize = ref(1);
+const totalItems = ref(0);
+
+interface Atune {
+  tuneName: string
+  workDir: string
+  prepare: string
+  tune:string
+  restore:string
+  note:string
+}
+
+const fetchData = async () => {
+  try {
+    const response = await getTuneLists({
+      page: currentPage.value,
+      size: pageSize.value,
+    });
+    
+    tableData.value = response.data.data; 
+    totalItems.value = response.data.total; 
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+};
+
+const handleSizeChange = (newSize: number) => {
+  pageSize.value = newSize;
+  fetchData();
+};
+
+const handleCurrentChange = (newPage:number) => {
+  currentPage.value = newPage;
+  fetchData();
+};
+
+onMounted(fetchData);
+
+</script>
+
+<style lang = 'less' scoped>
+
+.table {
+  .el-table th,
+  .el-table td {
+    text-align: center; // 内容居中
+  }
+
+  .el-table th .cell {
+    font-weight: bold; // 设置标签为黑体
+  }
+}
+.pagination {
+  position: absolute;
+  bottom: 0;
+  padding-bottom: 3%;
+}
+ 
+</style>
diff --git a/atune/web/src/views/Home.vue b/atune/web/src/views/Home.vue
index 753a90e0..14ea0859 100644
--- a/atune/web/src/views/Home.vue
+++ b/atune/web/src/views/Home.vue
@@ -2,69 +2,105 @@
   <div class="top">
     <span class="top-title">A-Tune调优管理</span>
   </div>
-  <el-tree
-    :data="atuneTree"
-    :props="defaultProps"
-    :default-checked-keys="selectedKeys"
-    :highlight-current="true"
-    @node-click="handleNodeClick"
-  ></el-tree>
+  <div class="container">
+    <div class="tree-container">
+      <div class="title">可调优对象</div>
+      <el-tree
+        :data="atuneTree"
+        :props="defaultProps"
+        :highlight-current="true"
+        @node-click="handleNodeClick"
+      ></el-tree>
+    </div>
+    <div class="table-container">
+      <div class="title">调优模板</div>
+      <div class="table">
+        <atuneList></atuneList>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import { getAtuneAllName } from '@/api/atune';
+import { ElTree } from 'element-plus';
+import atuneList from '@/components/atuneList.vue'
 
 const atuneTree = ref([]);
-const selectedKeys = ref<string[]>([]);
+const selectedNodeData = ref(""); 
 const defaultProps = ref({
   label: 'label',
 });
 
-onMounted(() => {
-  getAtuneAllName();
-});
-
-getAtuneAllName().then((res) => {
-  console.log(res);
+onMounted(async () => {
+  const res = await getAtuneAllName();
   atuneTree.value = res.data.data.map((item: string, index: number) => ({
     label: item,
     key: index.toString(),
   }));
 });
-getAtuneAllName();
 
-function handleNodeClick(node: { key: string }) {
- // 处理节点点击事件
- if (!selectedKeys.value.includes(node.key)) {
-    // 如果节点未选中，将其 key 添加到 selectedKeys 中
-    selectedKeys.value.push(node.key);
-  } else {
-    // 如果节点已选中，将其 key 从 selectedKeys 中移除
-    selectedKeys.value = selectedKeys.value.filter((key) => key !== node.key);
-  }
+function handleNodeClick(node:any) {
+  selectedNodeData.value = node.label;
 }
 </script>
 
 <style lang="less" scoped>
 .top {
-  width: 97.4%;
-  margin: 0 auto;
+  width: 100%;
   height: 64px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 
   &-title {
+    padding-left: 40px;
     font-size: 20px;
     color: #222;
     font-weight: 500;
     display: inline-block;
   }
-  .el-tree-node.is-checked {
-    background-color: #9755a4 ; /* 自定义选中高亮的背景颜色 */
-    color: #b7bc53; /* 设置文字颜色为白色 */
-  }
+}
+
+.container {
+  display: flex;
+  min-width: 100%;
+  height: 95%;
+}
+.tree-container,.table-container {
+  border-radius: 10px; 
+  overflow: hidden; 
+  margin: 10px; 
+  background-color: #fff; 
+}
+
+.tree-container {
+  height: 95%;
+  width: 20%;
+  border: 1px solid #ddd; 
+  margin-left: 30px;
+}
+
+.table-container {
+  height: 95%;
+  width: 76%;
+  border: 2px solid #ddd; 
+  display: flex;
+  flex-direction: column; 
+}
+.table{
+  flex: 1;
+  padding: 10px;
+}
+.title {
+  height: 30px; 
+  background-color: #395a9c;
+  color: #fff;
+  padding: 10px;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  text-indent: 15px;
 }
 
 </style>
-- 
Gitee