diff --git a/web/src/components/atuneTemplete.vue b/web/src/components/atuneTemplete.vue
index 6abafc496fc878c98fe07ba47b69882481a58307..8a59f4a57f0f37ff4fdffd3c1f6a86ebd4f7ca0d 100644
--- a/web/src/components/atuneTemplete.vue
+++ b/web/src/components/atuneTemplete.vue
@@ -53,6 +53,11 @@ let props = defineProps({
     default: false,
     required: true,
   },
+  isUpdate: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
   selectedEditRow: {
     type: Object as () => Atune,
     default: null,
@@ -70,7 +75,7 @@ const form = reactive({
   restore: "",
   note: "",
 });
-const emit = defineEmits(["closeDialog"]);
+const emit = defineEmits(["closeDialog", "refreshData"]);
 // 获取所有的调优模板
 const getAllTune = () => {
   getAtuneAllName().then((res) => {
@@ -116,6 +121,7 @@ const saveTuneData = () => {
   saveTune(form)
     .then((res) => {
       if (res.data.code === 200) {
+        emit('refreshData')
         ElMessage.success(res.data.msg);
       } else {
         ElMessage.error(res.data.msg);
@@ -129,6 +135,7 @@ const updateTuneData = () => {
   updateTune(form)
     .then((res) => {
       if (res.data.code === 200) {
+        emit('refreshData')
         ElMessage.success(res.data.msg);
       } else {
         ElMessage.error(res.data.msg);
@@ -141,7 +148,7 @@ const updateTuneData = () => {
 
 const onSubmit = () => {
   emit("closeDialog");
-  if (form.id === 0) {
+  if (!props.isUpdate) {
     saveTuneData();
   } else {
     updateTuneData();
diff --git a/web/src/views/atuneList.vue b/web/src/views/atuneList.vue
index 2269331d6ec8e09c18a229b0268a77eba9ff482a..706ea90d8f74e962b1586e1e2e63d4720132fbdf 100644
--- a/web/src/views/atuneList.vue
+++ b/web/src/views/atuneList.vue
@@ -23,7 +23,8 @@
     </my-table>
   </div>
   <el-dialog :title="title" :width="width" v-model="showDialog">
-    <atuneTemplete v-if="type === 'edit'" :is-tune="true" :selectedEditRow="selectedEditRow" @closeDialog="closeDialog">
+    <atuneTemplete v-if="type === 'edit'" :is-tune="true" :is-update="isUpdate" :selectedEditRow="selectedEditRow"
+      @closeDialog="closeDialog" @refresh-data="handleRefresh">
     </atuneTemplete>
     <tuneDetail v-if="type === 'detail'" :selectedEditRow="selectedEditRow" @closeDialog="closeDialog" />
   </el-dialog>
@@ -41,6 +42,7 @@ const selectedEditRow = ref({} as Atune);
 const type = ref(''); // 弹窗类型
 const title = ref('调优模板信息');
 const width = ref('50%')
+const isUpdate = ref(false)
 
 // 关闭dialog弹框
 const closeDialog = () => {
@@ -50,11 +52,16 @@ const closeDialog = () => {
 const handleCreat = () => {
   showDialog.value = true;
   type.value = 'edit';
+  isUpdate.value = false;
 };
 // 删除
 const handleDelete = () => {
   tuneRef.value.handleDelete();
 };
+// 刷新
+const handleRefresh = () => {
+  tuneRef.value.handleRefresh();
+}
 // 详情
 const handleDetail = (row: Atune) => {
   showDialog.value = true;
@@ -68,6 +75,7 @@ const handleEdit = (row: Atune) => {
   selectedEditRow.value = row;
   showDialog.value = true;
   type.value = 'edit';
+  isUpdate.value = true;
   title.value = row.custom_name + '信息';
 };
 </script>
diff --git a/web/src/views/taskList.vue b/web/src/views/taskList.vue
index dfb852519d2477562100646e464f6b1f78d5daca..e55cc9a1d8452316ad21e5cf9fa35a7f66701b4f 100644
--- a/web/src/views/taskList.vue
+++ b/web/src/views/taskList.vue
@@ -1,12 +1,7 @@
 <template>
   <div class="taskList">
-    <my-table
-      ref="taskRef"
-      :get-data="getTaskLists"
-      :get-all-data="getTaskLists"
-      :del-func="deleteTask"
-      :search-func="searchTask"
-    >
+    <my-table ref="taskRef" :get-data="getTaskLists" :get-all-data="getTaskLists" :del-func="deleteTask"
+      :search-func="searchTask">
       <template #listName>任务列表</template>
       <template #button_bar>
         <my-button @click="handleCreat">新增</my-button>
@@ -14,68 +9,126 @@
       </template>
       <el-table-column type="selection" width="55" />
       <el-table-column prop="id" label="编号" width="80" />
-      <el-table-column prop="task_name" label="名称" />
-      <el-table-column prop="command" label="命令" />
-      <el-table-column label="模板编号">
+      <el-table-column prop="task_name" label="任务名称" />
+      <el-table-column label="调优对象">
         <template #default="props">
-          <el-link type="primary" @click="atuneDetail(props.row)"
-            >{{ props.row.tune ? props.row.tune_id : "暂无" }}
-            <el-icon class="el-icon--right"><icon-view /></el-icon
-          ></el-link>
+          {{ props.row.tune.tuneName }}
+        </template>
+      </el-table-column>
+      <el-table-column label="模板名称" :filters="allTune" :filter-method="filterTune">
+        <template #default="props">
+          <el-link type="primary" @click="atuneDetail(props.row)">{{ props.row.tune ? props.row.tune.custom_name : "暂无" }}
+            <el-icon class="el-icon--right"><icon-view /></el-icon></el-link>
         </template>
       </el-table-column>
       <el-table-column prop="task_status" label="状态">
+        <template #default="{ row }">
+          <div style="display: flex;align-items: center; background-color: ;">
+            <el-icon class="is-loading" color="#409eff" v-if="row.task_status == '运行中'">
+              <Loading />
+            </el-icon>
+            <el-icon color="#67C23A" v-else-if="row.task_status == '完成'">
+              <CircleCheck />
+            </el-icon>
+            <el-icon color="#E6A23C" v-else>
+              <Clock />
+            </el-icon>
+            <span>{{ row.task_status }}</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="task_process" label="进度">
         <template #default="props">
-          <el-progress
-            v-if="props.row.task_status === '执行中'"
-            :percentage="100"
-            :format="format"
-            striped
-            striped-flow
-            :duration="4"
-          />
-          <el-progress
-            v-else-if="props.row.task_status === '已完成'"
-            :percentage="100"
-            status="success"
-            :duration="0"
-          />
-          <el-progress
-            v-else
-            :percentage="0"
-            :format="format"
-            status="exception"
-          />
+          <el-progress :percentage="Math.floor(100 * (props.row.success_count / props.row.uuid_count))"><span>{{
+            props.row.success_count
+            + '/' + props.row.uuid_count }}</span></el-progress>
         </template>
       </el-table-column>
       <el-table-column prop="create_time" label="创建时间" />
       <el-table-column prop="update_time" label="更新时间" />
-      <el-table-column label="操作" width="80">
+      <el-table-column label="操作" width="160">
         <template #default="{ row }">
-          <my-button round size="small" @click="handleDetail(row)"
-            >详情</my-button
-          >
+          <my-button round size="small" :disabled="row.task_status === '运行中'" @click="handleStart(row)">{{ row.task_status
+            === '等待' ? '启动' : '重启' }}</my-button>
+          <my-button round size="small" @click="handleDetail(row)">详情</my-button>
         </template>
       </el-table-column>
     </my-table>
   </div>
+  <el-dialog title="新增任务" width="50%" v-model="showDialog">
+    <task-form @closeDialog="closeDialog" @refreshData="refreshData" />
+  </el-dialog>
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
-import { View as IconView } from "@element-plus/icons-vue";
-import { getTaskLists, searchTask, deleteTask } from "@/api/atune";
-import { Task } from "@/types/atune";
+import { onMounted, ref } from "vue";
+import { View as IconView, Loading, CircleCheck, Clock } from "@element-plus/icons-vue";
+import { getTaskLists, searchTask, deleteTask, getAtuneAllName, startTask } from "@/api/atune";
+import { Task, ResultData } from "@/types/atune";
 import { useRouter } from "vue-router";
 import { useAtuneStore } from "@/store/atune";
+import taskForm from "./taskForm.vue"
+import { TableColumnCtx } from "element-plus";
 
 const taskRef = ref();
+const showDialog = ref(false);
+interface FilterObj {
+  text: string;
+  value: string;
+}
+const allTune = ref<FilterObj[]>();
 // 路由管理器
 const router = useRouter();
 const emit = defineEmits(["atuneDetail"]);
 
-// 状态渲染函数
-const format = (percentage: number) => (percentage === 0 ? "error" : "running");
+onMounted(() => {
+  getAllTune();
+})
+
+// 获取所有的调优模板
+const getAllTune = () => {
+  getAtuneAllName().then((res) => {
+    let tuneFilterArr: Array<FilterObj> = [];
+    if (res.data.code === 200) {
+      let tuneDatas = res.data.data;
+      tuneDatas.map((tuneItem: string) => {
+        tuneFilterArr.push({ text: tuneItem, value: tuneItem });
+      });
+      allTune.value = tuneFilterArr;
+
+    }
+  });
+};
+
+// 关闭dialog弹框
+const closeDialog = () => {
+  showDialog.value = false;
+};
+
+// 刷新表格数据
+const refreshData = () => {
+  taskRef.value.handleRefresh();
+}
+
+// 筛选模板任务
+const filterTune = (value: string, row: Task, _column: TableColumnCtx<Task>) => {
+  console.log(value, row)
+  return row.tune.custom_name === value;
+}
+
+// 开始执行任务
+const handleStart = (row: Task) => {
+  let params = {
+    machine_uuids: row.machine_uuids,
+    tuneId: row.tune_id,
+    taskId: row.id
+  }
+  startTask({ ...params }).then((res: { data: ResultData }) => {
+    if (res.data.code === 200) {
+      taskRef.value.handleRefresh();
+    }
+  })
+}
 
 // 查看模板详情
 const atuneDetail = (row: Task) => {
@@ -87,8 +140,11 @@ const handleDetail = (row: Task) => {
   useAtuneStore().setTaskRow(row);
 };
 
+
 // 新增
-const handleCreat = () => {};
+const handleCreat = () => {
+  showDialog.value = true;
+};
 // 删除
 const handleDelete = () => {
   taskRef.value.handleDelete();