From 1582edd11e90509cc8c3d545b6ec96ca43e9e319 Mon Sep 17 00:00:00 2001
From: zhaozhenfang <zhaozhenfang@kylinos.cn>
Date: Mon, 22 Jan 2024 09:51:25 +0800
Subject: [PATCH] delete the temeplate flowchart write with vue-konva

---
 web/package.json                     |   4 +-
 web/src/App.vue                      |  24 ++----
 web/src/api/atune.ts                 |  29 ++++++-
 web/src/api/result.ts                |  30 ++-----
 web/src/assets/main.css              |  10 +--
 web/src/components/atuneTemplete.vue |  23 ++---
 web/src/components/flowChart.vue     | 107 -----------------------
 web/src/main.ts                      |   4 +-
 web/src/store/atune.ts               |  20 +----
 web/src/store/canvas.ts              | 121 ---------------------------
 web/src/types/atune.d.ts             |  12 ++-
 web/src/views/Home.vue               |  12 +--
 web/src/views/atuneDetail.vue        |  84 +++++++++++--------
 web/src/views/atuneList.vue          |  59 +++++--------
 web/vite.config.ts                   |   2 +-
 web/yarn.lock                        |  10 ---
 16 files changed, 139 insertions(+), 412 deletions(-)
 delete mode 100644 web/src/components/flowChart.vue
 delete mode 100644 web/src/store/canvas.ts

diff --git a/web/package.json b/web/package.json
index 23d6b77..100f199 100644
--- a/web/package.json
+++ b/web/package.json
@@ -12,10 +12,8 @@
     "axios": "^1.6.0",
     "element-plus": "^2.4.1",
     "esbuild": "^0.19.10",
-    "konva": "^9.3.0",
     "pinia": "^2.1.7",
     "vue": "^3.3.4",
-    "vue-konva": "^3.0.2",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
@@ -26,4 +24,4 @@
     "vite": "^4.4.5",
     "vue-tsc": "^1.8.5"
   }
-}
+}
\ No newline at end of file
diff --git a/web/src/App.vue b/web/src/App.vue
index 23c2025..2e42049 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,24 +1,14 @@
 <template>
   <div class="app">
     <div class="top">
-      <span class="top-title">A-Tune调优管理</span>
+      <!-- <span class="top-title">A-Tune调优管理</span> -->
       <div class="nav">
         <!-- 两页 任务列表、调优模板列表 -->
-        <router-link
-          class="nav-link shadow"
-          to="/task"
-          :active-class="'active'"
-        >
-          任务</router-link
-        >
+        <router-link class="nav-link shadow" to="/task" :active-class="'active'">
+          任务</router-link>
         <el-divider direction="vertical" />
-        <router-link
-          class="nav-link shadow"
-          to="/atune"
-          :active-class="'active'"
-        >
-          模板</router-link
-        >
+        <router-link class="nav-link shadow" to="/atune" :active-class="'active'">
+          模板</router-link>
       </div>
     </div>
 
@@ -58,6 +48,7 @@ const zhCn = ref(locale);
       display: inline-block;
     }
   }
+
   .nav {
     position: absolute;
     z-index: 100;
@@ -66,6 +57,7 @@ const zhCn = ref(locale);
     display: flex;
     justify-content: space-around;
     align-items: center;
+
     &-link {
       display: inline-block;
       width: 44%;
@@ -75,11 +67,13 @@ const zhCn = ref(locale);
       border-radius: 6px;
       font-weight: bold;
       background-color: #fff;
+
       &:hover {
         background-color: rgba(96, 122, 207, 0.4);
         color: #fff;
       }
     }
+
     .active {
       color: #fff;
       background-color: rgb(96, 122, 207);
diff --git a/web/src/api/atune.ts b/web/src/api/atune.ts
index 546fff1..c378a14 100644
--- a/web/src/api/atune.ts
+++ b/web/src/api/atune.ts
@@ -18,10 +18,27 @@ export function searchTask(data: object) {
   });
 }
 
+// 获取所有机器
+export function getAllMachine() {
+  return request({
+    url: "/plugin/atune/tune_machine",
+    method: "get",
+  });
+}
+
 // 新增任务
 export function addTask(data: object) {
   return request({
-    url: "/plugin/atune/run",
+    url: "/plugin/atune/task_new",
+    method: "post",
+    data,
+  });
+}
+
+// 执行任务
+export function startTask(data: object) {
+  return request({
+    url: "/plugin/atune/task_run",
     method: "post",
     data,
   });
@@ -36,7 +53,7 @@ export function deleteTask(data: object) {
   });
 }
 
-// 获取所有的调优列表
+// 获取所有的调优列表名称 Array[string]
 export function getAtuneAllName() {
   return request({
     url: "/plugin/atune/all",
@@ -44,6 +61,14 @@ export function getAtuneAllName() {
   });
 }
 
+// 获取所有的调优列表 Array[Atune]
+export function getAtuneAllList() {
+  return request({
+    url: "/plugin/atune/tunes_noPaged",
+    method: "get",
+  });
+}
+
 // 获取某个调优对象的具体信息
 export function getAtuneInfo(data: object) {
   return request({
diff --git a/web/src/api/result.ts b/web/src/api/result.ts
index d48dc0f..0ed58a8 100644
--- a/web/src/api/result.ts
+++ b/web/src/api/result.ts
@@ -1,28 +1,10 @@
 import request from './request';
 
-// 获取结果分页
-export function getResultLists(data: object) {
-    return request({
-      url: '/plugin/atune/results',
-      method: 'get',
-      params: data,
-    });
-  }
-
-// 高级搜索结果分页
-export function searchResult(data: object) {
-    return request({
-      url: '/plugin/atune/result_search',
-      method: 'get',
-      params: data,
-    });
-  }
-
-  // 删除结果
-export function deleteResult(data: object) {
+// 获取任务结果详情
+export function getTaskDetail(data: object) {
   return request({
-    url: '/plugin/atune/result_delete',
-    method: 'delete',
-    data,
+    url: '/plugin/atune/result',
+    method: 'get',
+    params: data,
   });
-}
\ No newline at end of file
+}
diff --git a/web/src/assets/main.css b/web/src/assets/main.css
index 22c44ad..f6ae72d 100644
--- a/web/src/assets/main.css
+++ b/web/src/assets/main.css
@@ -1,16 +1,12 @@
-html {
-  height: 100%;
-  width: 100%;
+* {
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
 }
 
-body {
+html,body {
   height: 100%;
   width: 100%;
-  margin: 0px;
-  padding: 0px;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
@@ -21,5 +17,5 @@ body {
     "Segoe UI Emoji", Segoe UI Symbol;
 }
 .shadow {
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 6px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 -3px 4px rgba(0, 0, 0, 0.05), 0 6px 10px 0 rgba(0, 0, 0, 0.1);
 }
diff --git a/web/src/components/atuneTemplete.vue b/web/src/components/atuneTemplete.vue
index 3b6b4bb..6abafc4 100644
--- a/web/src/components/atuneTemplete.vue
+++ b/web/src/components/atuneTemplete.vue
@@ -2,17 +2,8 @@
   <div>
     <el-form :model="form" class="custom-form" :disabled="!isTune">
       <el-form-item label="调优对象" v-show="isTune">
-        <el-select
-          v-model="form.tuneName"
-          placeholder="请选择调优模板"
-          @change="fetchAtuneInfo(form.tuneName)"
-        >
-          <el-option
-            v-for="item in allTune"
-            :key="item"
-            :label="item"
-            :value="item"
-          />
+        <el-select v-model="form.tuneName" placeholder="请选择调优模板" @change="fetchAtuneInfo(form.tuneName)">
+          <el-option v-for="item in allTune" :key="item" :label="item" :value="item" />
         </el-select>
       </el-form-item>
       <el-form-item label="自定义名">
@@ -34,12 +25,7 @@
         <el-input v-model="form.restore"></el-input>
       </el-form-item>
       <el-form-item label="注意事项">
-        <el-input
-          v-model="form.note"
-          class="custom-input"
-          type="textarea"
-          :rows="6"
-        ></el-input>
+        <el-input v-model="form.note" class="custom-input" type="textarea" :rows="6"></el-input>
       </el-form-item>
     </el-form>
     <el-form class="centered-buttons">
@@ -58,7 +44,7 @@ import {
   updateTune,
   getAtuneAllName,
 } from "@/api/atune";
-import { Atune, Task } from "@/types/atune";
+import { Atune } from "@/types/atune";
 import MyButton from "@/components/myButton.vue";
 
 let props = defineProps({
@@ -191,6 +177,7 @@ watchEffect(() => {
     vertical-align: top;
   }
 }
+
 .centered-buttons {
   text-align: center;
 }
diff --git a/web/src/components/flowChart.vue b/web/src/components/flowChart.vue
deleted file mode 100644
index 6d1eb08..0000000
--- a/web/src/components/flowChart.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <div id="flowChart">
-    <v-stage ref="stage" :config="stageSize" v-if="showFlow">
-      <v-layer>
-        <v-rect
-          v-for="(item, index) in rectArr"
-          @click="handleClick(index, item)"
-          :config="{
-            ...useCanvasStore().drawRect(index),
-            fill: rectBgColor[index],
-          }"
-        />
-        <v-text
-          v-for="(item, index) in rectArr"
-          @click="handleClick(index, item)"
-          :config="useCanvasStore().writeText(index, item)"
-        />
-
-        <v-shape
-          v-for="item in 3"
-          :config="{
-            sceneFunc: (...event:any) =>{arrowConfig(event[0],event[1], item)},
-            fill: '#222',
-            stroke: '#222',
-            strokeWidth: 2,
-          }"
-        />
-      </v-layer>
-      <v-layer ref="dragLayer"></v-layer>
-    </v-stage>
-  </div>
-</template>
-<script lang="ts" setup>
-import { ref, onMounted } from "vue";
-import { useCanvasStore } from "@/store/canvas";
-const showFlow = ref(false);
-const stage = ref();
-const stageW = ref(0);
-const stageH = ref(0);
-const stageSize = ref({});
-const rectBgColor = ref(["yellow", "#fff", "#fff", "#fff"]);
-const emit = defineEmits(["clickRect"]);
-let rectArr = ["start", "prepare", "restore", "tune"];
-let arrowStartX = 0;
-let arrowStartY = 0;
-let arrowLength = 0;
-onMounted(() => {
-  const stageDiv = document.getElementById("flowChart");
-  stageW.value = stageDiv!.clientWidth;
-  stageH.value = stageDiv!.clientHeight;
-  useCanvasStore().setWidth(stageW.value);
-});
-// 舞台的大小，基本参数的动态获取
-setTimeout(() => {
-  const width = stageW.value;
-  const height = stageH.value;
-  stageSize.value = {
-    width: width,
-    height: height,
-  };
-  arrowStartX = useCanvasStore().arrowStartX;
-  arrowStartY = useCanvasStore().arrowStartY;
-  arrowLength = useCanvasStore().arrowLength;
-  showFlow.value = true;
-}, 100);
-
-// 鼠标移入事件
-const handleMouseMove = (_shapeName: string) => {};
-// 鼠标移出事件
-const handleMouseOut = (_shapeName: string) => {};
-// 鼠标点击事件
-const handleClick = (index: number, rectText: string) => {
-  rectBgColor.value[index] = "yellow";
-  rectBgColor.value.forEach((_item, itemIndex) => {
-    if (itemIndex != index) {
-      rectBgColor.value[itemIndex] = "#fff";
-    }
-  });
-  emit("clickRect", rectText);
-};
-
-// 配置箭头参数
-let arrowPosition = (idNum: number) => {
-  let arrowFX = arrowStartX;
-  let arrowTX = arrowStartX;
-  let arrowFY = arrowStartY * idNum + 1;
-  let arrowTY = arrowStartY * idNum + arrowLength - 2;
-  return [arrowFX, arrowTX, arrowFY, arrowTY];
-};
-const arrowConfig = (context: any, shape: any, idNum: number) => {
-  let params: number[] = arrowPosition(idNum);
-  useCanvasStore().drawArrow(
-    context,
-    shape,
-    params[0],
-    params[1],
-    params[2],
-    params[3]
-  );
-};
-</script>
-<style lang="less" scoped>
-#flowChart {
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/web/src/main.ts b/web/src/main.ts
index 0165c2a..168077c 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -5,20 +5,20 @@ import App from "./App.vue";
 import ElementPlus from "element-plus";
 import MyTable from "@/components/table.vue";
 import MyButton from "@/components/myButton.vue";
+import { ElDialog } from "element-plus";
 import "element-plus/dist/index.css";
 import router from "./router";
 import { createPinia } from "pinia";
-import VueKonva from "vue-konva";
 
 const app = createApp(App);
 // 设置全局变量
 // app.config.globalProperties.$router = router;
+app.component("el-dialog", ElDialog);
 app.component("my-table", MyTable);
 app.component("my-button", MyButton);
 
 app.use(createPinia());
 app.use(router);
 app.use(ElementPlus);
-app.use(VueKonva);
 
 app.mount("#app");
diff --git a/web/src/store/atune.ts b/web/src/store/atune.ts
index a36d31a..6a241c6 100644
--- a/web/src/store/atune.ts
+++ b/web/src/store/atune.ts
@@ -1,31 +1,15 @@
 import { defineStore } from "pinia";
-import { Task, Atune } from "@/types/atune";
+import { Task } from "@/types/atune";
 
 export const useAtuneStore = defineStore("atune", {
   state: () => ({
-    count: 0,
     taskRow: {} as Task,
-    tuneRow: {} as Atune,
   }),
-  getters: {
-    double: (state) => state.count * 2,
-  },
   actions: {
-    increment() {
-      this.count++;
-    },
     // 设置taskRow数据
     setTaskRow(row: Task) {
       this.taskRow = row;
     },
-    // 设置taskRow数据
-    setTuneRow(row: Atune) {
-      this.tuneRow = row;
-      console.log(this.tuneRow);
-    },
+
   },
-  //   persist: {
-  //     enabled: true, // 开启存储
-  //     strategies: [{ storage: localStorage, paths: ['atune'] }],
-  //   },
 });
diff --git a/web/src/store/canvas.ts b/web/src/store/canvas.ts
deleted file mode 100644
index 6d757c8..0000000
--- a/web/src/store/canvas.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-import { defineStore } from "pinia";
-import { RectConfig } from "@/types/atune";
-export const useCanvasStore = defineStore("canvas", {
-  state: () => ({
-    ctx: {},
-    width: 0,
-    fromX: 0,
-    fromY: 50,
-    arrowLength: 50,
-    rectWidth: 100,
-    rectHeight: 50,
-    rectConfig: {
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 50,
-      stroke: "#fff",
-      shadowBlur: 2,
-      cornerRadius: 10,
-    },
-    textConfig: { x: 0, y: 20, text: "start", fontSize: 16 },
-  }),
-  getters: {
-    /**
-     * 箭头函数的写法，直接把 state 中的值传进来使用
-     * 如果要在 Getter 中调用其他的计算属性方法，不能使用箭头函数
-     * 注意：需要自己定义当前方法的返回值类型
-     * @param state
-     * @returns
-     */
-    // 箭头的起始位置X Y
-    arrowStartX: (state) => {
-      return state.fromX;
-    },
-    arrowStartY: (state) => {
-      return state.fromY + state.rectHeight;
-    },
-  },
-  actions: {
-    setCtx(ctx: any) {
-      this.ctx = ctx;
-    },
-    setWidth(width: number) {
-      this.width = width;
-      this.fromX = width / 2;
-    },
-    drawRect(idNum: number) {
-      // 画矩形
-      let rectConfig: RectConfig = JSON.parse(JSON.stringify(this.rectConfig));
-      rectConfig.x = this.width / 2 - this.rectWidth / 2;
-      rectConfig.y = this.fromY + this.fromY * idNum * 2;
-      return rectConfig;
-    },
-    // 计算文字像素
-    getTextWidth(text: string, fontSize: number, fontWeight: string) {
-      // 创建临时元素
-      const ele: HTMLElement = document.createElement("div");
-      ele.style.position = "absolute";
-      ele.style.whiteSpace = "nowrap";
-      ele.style.fontSize = fontSize + "px";
-      ele.style.fontWeight = fontWeight;
-      ele.innerText = text;
-      document.body.append(ele);
-      const width: number = ele.getBoundingClientRect().width;
-      document.body.removeChild(ele);
-      return width;
-    },
-    // 写text
-    writeText(idNum: number, text: string) {
-      let getTextWidth = this.getTextWidth(text, 16, "none");
-      let textConfig = JSON.parse(JSON.stringify(this.textConfig));
-      textConfig.x = this.fromX - getTextWidth / 2;
-      textConfig.y =
-        this.fromY + this.fromY * idNum * 2 + this.rectHeight / 2 - 6;
-      textConfig.text = text;
-      return textConfig;
-    },
-    drawArrow(
-      // 画箭头
-      context: any,
-      shape: any,
-      fX: number,
-      tX: number,
-      fY: number,
-      tY: number
-    ) {
-      const headlen = 10; //箭头线的长度
-      const theta = 30; //箭头线与直线的夹角
-      const fromX = fX;
-      const fromY = fY;
-      const toX = tX;
-      const toY = tY;
-      let arrowX, arrowY; //箭头线终点坐标
-      // 计算各角度和对应的箭头终点坐标
-      let angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI;
-      let angle1 = ((angle + theta) * Math.PI) / 180;
-      let angle2 = ((angle - theta) * Math.PI) / 180;
-      let topX = headlen * Math.cos(angle1);
-      let topY = headlen * Math.sin(angle1);
-      let botX = headlen * Math.cos(angle2);
-      let botY = headlen * Math.sin(angle2);
-      context.beginPath();
-      // draw a line
-      context.moveTo(fromX, fromY);
-      context.lineTo(toX, toY);
-      // draw top arrow
-      arrowX = toX + topX;
-      arrowY = toY + topY;
-      context.moveTo(arrowX, arrowY);
-      context.lineTo(toX, toY);
-      // draw bottom arrow
-      arrowX = toX + botX;
-      arrowY = toY + botY;
-      context.lineTo(arrowX, arrowY);
-      context.closePath();
-
-      // special Konva.js method
-      context.fillStrokeShape(shape);
-    },
-  },
-});
diff --git a/web/src/types/atune.d.ts b/web/src/types/atune.d.ts
index 2bde747..da0ca03 100644
--- a/web/src/types/atune.d.ts
+++ b/web/src/types/atune.d.ts
@@ -1,5 +1,7 @@
 export interface Task {
   id: number;
+  uuid_count: number;
+  success_count: number;
   task_name: string;
   command: string;
   task_status: string;
@@ -8,6 +10,8 @@ export interface Task {
   results: Array;
   tune_id: int;
   tune: Atune;
+  machine_uuids: Array[string];
+  description: string;
 }
 
 export interface Atune {
@@ -43,13 +47,13 @@ export type AtuneArray = Atune[];
 // *接口api返回结果约束不含data
 export interface Result {
   code: number;
-  msg: string;
+  msg?: string;
 }
 
 // *接口api返回结果含有page信息
-export interface ReaultData<T = any> extends Result {
-  data: Task[] | Atune[];
-  ok?: string;
+export interface ResultData extends Result {
+  data: Array;
+  ok?: Boolean;
   page: number;
   size: number;
   total: number;
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 0cbc196..1b493dd 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -8,19 +8,14 @@
   </div>
 
   <!-- 调优模板详情 -->
-  <el-dialog title="调优模板信息" width="70%" v-model="showDialog">
-    <atuneTemplete
-      :is-tune="false"
-      :selectedEditRow="selectedEditRow"
-      @closeDialog="closeDialog"
-    >
+  <el-dialog title="调优模板信息" width="50%" v-model="showDialog">
+    <atuneTemplete :is-tune="false" :selectedEditRow="selectedEditRow" @closeDialog="closeDialog">
     </atuneTemplete>
   </el-dialog>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, ref } from "vue";
-import { ElDialog } from "element-plus";
 import taskList from "./taskList.vue";
 import atuneTemplete from "@/components/atuneTemplete.vue";
 import { Task, Atune } from "@/types/atune";
@@ -37,13 +32,14 @@ onMounted(() => {
   showDetail.value = useRouterStore().showRoute(useRoute().fullPath, "detail");
 });
 // 组件内守卫
-onBeforeRouteUpdate((to: any, _from: any, next: any) => {
+onBeforeRouteUpdate((to: { fullPath: string;[propName: string]: any; }, _from: {}, next: Function) => {
   showDetail.value = useRouterStore().showRoute(to.fullPath, "detail");
   next();
 });
 
 // 关闭dialog弹框
 const closeDialog = () => {
+
   showDialog.value = false;
 };
 
diff --git a/web/src/views/atuneDetail.vue b/web/src/views/atuneDetail.vue
index a541372..96f45f5 100644
--- a/web/src/views/atuneDetail.vue
+++ b/web/src/views/atuneDetail.vue
@@ -2,57 +2,73 @@
   <div class="atuneDetail">
     <el-container class="atuneDetail_con">
       <el-header height="20%">
-        <el-descriptions title="模板详情">
-          <el-descriptions-item label="名称:">
-            <el-tag>{{ tuneName }}</el-tag></el-descriptions-item
-          >
-          <el-descriptions-item label="工作目录:">{{
+        <el-descriptions :column="1">
+          <el-descriptions-item label="模板名称：">
+            {{ custom_name }}</el-descriptions-item>
+          <el-descriptions-item label="调优对象：">
+            {{ tuneName }}</el-descriptions-item>
+          <el-descriptions-item label="工作目录：">{{
             workDir
           }}</el-descriptions-item>
-          <el-descriptions-item label="注意事项:">{{
+          <el-descriptions-item label="注意事项：">{{
             note
           }}</el-descriptions-item>
+          <el-descriptions-item>
+            <el-divider />
+          </el-descriptions-item>
+          <el-descriptions-item label="流程如下：">
+            <el-steps align-center :active="active" finish-status="success">
+              <el-step v-for="(item, index) in stepArr" :key="index" :title="item" />
+            </el-steps>
+          </el-descriptions-item>
+          <el-descriptions-item :label="stepArr[active - 1] + '：'">
+            <el-tag type="" effect="dark" size="large">
+              {{ shell }}
+            </el-tag></el-descriptions-item>
+          <el-descriptions-item>
+            <el-divider content-position="center">
+              <el-button type="primary" plain size="small" style="margin-top: 12px" @click="next">下一步</el-button>
+            </el-divider>
+          </el-descriptions-item>
         </el-descriptions>
       </el-header>
-      <el-container>
-        <el-aside width="40%" style="display: flex; justify-content: center"
-          ><flow-chart
-            style="width: 90%; height: 100%; margin: 0 auto"
-            @clickRect="showShell"
-          ></flow-chart
-        ></el-aside>
-        <el-main>
-          <div class="shell">{{ shell }}</div>
-        </el-main>
-      </el-container>
     </el-container>
   </div>
 </template>
 <script lang="ts" setup>
-import flowChart from "@/components/flowChart.vue";
-import { ref } from "vue";
-import { useAtuneStore } from "@/store/atune";
-const shell = ref("start:点击查看每一步具体的脚本信息");
-let { prepare, restore, tune, workDir, tuneName, note } =
-  useAtuneStore().tuneRow;
-
-const showShell = (shellName: string) => {
-  switch (shellName) {
-    case "prepare":
+import { ref, watchEffect } from "vue";
+import { Atune } from "@/types/atune";
+const shell = ref("here is every step's shell script");
+let props = defineProps({
+  selectedEditRow: {
+    type: Object as () => Atune,
+    default: null,
+  },
+});
+let { prepare, restore, tune, workDir, tuneName, note, custom_name } =
+  props.selectedEditRow;
+const stepArr = ['开始', '环境准备', '调优', '环境恢复'];
+const active = ref(1)
+const next = () => {
+  if (active.value++ > 3) active.value = 1
+}
+watchEffect(() => {
+  switch (active.value) {
+    case 2:
       shell.value = prepare;
       break;
-    case "restore":
-      shell.value = restore;
-      break;
-    case "tune":
+    case 3:
       shell.value = tune;
       break;
+    case 4:
+      shell.value = restore;
+      break;
 
     default:
-      shell.value = "start:点击查看每一步具体的脚本信息";
+      shell.value = "here is every step's shell script";
       break;
   }
-};
+})
 </script>
 <style lang="less" scoped>
 .atuneDetail {
@@ -61,10 +77,12 @@ const showShell = (shellName: string) => {
   display: flex;
   align-items: center;
   background-color: #fff;
+
   &_con {
     width: 100%;
     height: 96%;
   }
+
   .shell {
     width: 90%;
     height: 100%;
diff --git a/web/src/views/atuneList.vue b/web/src/views/atuneList.vue
index 08257fa..2269331 100644
--- a/web/src/views/atuneList.vue
+++ b/web/src/views/atuneList.vue
@@ -1,12 +1,7 @@
 <template>
-  <div class="tuneList shadow" v-if="!showDetail">
-    <my-table
-      ref="tuneRef"
-      :get-data="getTuneLists"
-      :get-all-data="getTuneLists"
-      :del-func="deleteTune"
-      :search-func="searchTune"
-    >
+  <div class="tuneList shadow">
+    <my-table ref="tuneRef" :get-data="getTuneLists" :get-all-data="getTuneLists" :del-func="deleteTune"
+      :search-func="searchTune">
       <template #listName>模板列表</template>
       <template #button_bar>
         <my-button @click="handleCreat">新增</my-button>
@@ -27,44 +22,25 @@
       </el-table-column>
     </my-table>
   </div>
-  <el-dialog title="调优模板信息" width="70%" v-model="showDialog">
-    <atuneTemplete
-      :is-tune="true"
-      :selectedEditRow="selectedEditRow"
-      @closeDialog="closeDialog"
-    >
+  <el-dialog :title="title" :width="width" v-model="showDialog">
+    <atuneTemplete v-if="type === 'edit'" :is-tune="true" :selectedEditRow="selectedEditRow" @closeDialog="closeDialog">
     </atuneTemplete>
+    <tuneDetail v-if="type === 'detail'" :selectedEditRow="selectedEditRow" @closeDialog="closeDialog" />
   </el-dialog>
-  <div class="tuneList shadow">
-    <router-view />
-  </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
-import { ElDialog } from "element-plus";
+import { ref } from "vue";
 import { getTuneLists, searchTune, deleteTune } from "@/api/atune";
 import atuneTemplete from "@/components/atuneTemplete.vue";
 import { Atune } from "@/types/atune";
-import { useRouter, useRoute } from "vue-router";
-import { onBeforeRouteUpdate } from "vue-router";
-import { useRouterStore } from "@/store/router";
-import { useAtuneStore } from "@/store/atune";
+import tuneDetail from "./atuneDetail.vue"
 const tuneRef = ref();
-const router = useRouter();
-const showDetail = ref(false);
 const showDialog = ref(false);
-const selectedEditRow = ref();
-
-// 每次刷新界面都需重新判断路由
-onMounted(() => {
-  showDetail.value = useRouterStore().showRoute(useRoute().fullPath, "detail");
-});
-// 组件内守卫
-onBeforeRouteUpdate((to: any, _from: any, next: any) => {
-  showDetail.value = useRouterStore().showRoute(to.fullPath, "detail");
-  next();
-});
+const selectedEditRow = ref({} as Atune);
+const type = ref(''); // 弹窗类型
+const title = ref('调优模板信息');
+const width = ref('50%')
 
 // 关闭dialog弹框
 const closeDialog = () => {
@@ -73,6 +49,7 @@ const closeDialog = () => {
 // 新增
 const handleCreat = () => {
   showDialog.value = true;
+  type.value = 'edit';
 };
 // 删除
 const handleDelete = () => {
@@ -80,14 +57,18 @@ const handleDelete = () => {
 };
 // 详情
 const handleDetail = (row: Atune) => {
-  useAtuneStore().setTuneRow(row);
-  showDetail.value = true;
-  router.push("/atune/detail");
+  showDialog.value = true;
+  selectedEditRow.value = row;
+  type.value = 'detail';
+  title.value = row.custom_name + '详情';
+  width.value = '70%';
 };
 // 编辑
 const handleEdit = (row: Atune) => {
   selectedEditRow.value = row;
   showDialog.value = true;
+  type.value = 'edit';
+  title.value = row.custom_name + '信息';
 };
 </script>
 
diff --git a/web/vite.config.ts b/web/vite.config.ts
index eb222fa..f971db0 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -16,7 +16,7 @@ export default defineConfig({
     cors: true,
     proxy: {
       '/plugin/atune': {
-        target: 'http://10.41.107.32:8099',
+        target: 'http://10.44.43.181:8099',
         changeOrigin: true,
         rewrite: (p) => p.replace('/^\/plugin\/atune/', '')
       },
diff --git a/web/yarn.lock b/web/yarn.lock
index 84e3941..edb0a88 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -666,11 +666,6 @@ is-what@^3.14.1:
   resolved "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1"
   integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
 
-konva@^9.3.0:
-  version "9.3.0"
-  resolved "https://registry.npmmirror.com/konva/-/konva-9.3.0.tgz#0fb5f8112eab9cc10a6f42f45e0e0c4def229f85"
-  integrity sha512-qLTW06GRwb+WMMUXJcGIb0qP4uO0mZLAwgRI82zuCkRmCH1lFsVPmrPzqqHnjKCMu4Jzw6d/R8JxkPw7gkVnuw==
-
 less@^4.2.0:
   version "4.2.0"
   resolved "https://registry.npmmirror.com/less/-/less-4.2.0.tgz#cbefbfaa14a4cd388e2099b2b51f956e1465c450"
@@ -894,11 +889,6 @@ vue-demi@*, vue-demi@>=0.14.5:
   resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz#dc706582851dc1cdc17a0054f4fec2eb6df74c92"
   integrity sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==
 
-vue-konva@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.npmmirror.com/vue-konva/-/vue-konva-3.0.2.tgz#72393d5cd3b9ac4f798e5d381de5ef451456d810"
-  integrity sha512-FNWKtPPVDihNuQcq7F4GzuVPkPaEfg8lnWezpRqgiC2VetdvONOiYOFD800jNL5kt/lEYnSOYvhqqdTPbv2c8w==
-
 vue-router@^4.2.5:
   version "4.2.5"
   resolved "https://registry.npmmirror.com/vue-router/-/vue-router-4.2.5.tgz#b9e3e08f1bd9ea363fdd173032620bc50cf0e98a"
-- 
Gitee