feat(task): 优化任务视图功能和布局

- 添加刷新按钮和自动追踪开关
- 增加任务进度显示
- 优化树形结构展示
- 调整样式和布局，提高可读性和易用性

src/editor/widgets/task/TaskView2.vue

@@ -5,6 +5,8 @@ import { localeText as localeTextCn } from "@/components/yvTable/yv-aggrid-cn.lo
 import { Request } from "@ease-forge/shared";
 import type { GridOptions } from "ag-grid-enterprise";
 import type { GridApi, GridReadyEvent } from "ag-grid-community";
+import { Refresh } from "@element-plus/icons-vue";
+import { ElButton, ElInput, ElSwitch } from "element-plus";
 
 defineOptions({
     name: 'TaskView',
@@ -20,12 +22,14 @@ const props = withDefaults(defineProps<TaskViewProps>(), {});
 // 定义 State 类型
 interface TaskViewState {
     loading: boolean;
+    automaticTracking: boolean;
     grid1Data: Array<any>;
 }
 
 // state 属性
 const state = reactive<TaskViewState>({
     loading: false,
+    automaticTracking: false,
     grid1Data: [],
 });
 
@@ -50,6 +54,7 @@ const data: TaskViewData = {
             { field: 'type', headerName: '类型', width: 120 },
             { field: 'status', headerName: '状态', width: 120 },
             { field: 'err', headerName: '异常' },
+            { field: 'progress', headerName: '进度' },
             { field: 'payload', headerName: '任务负载', width: 600 },
             { field: 'priority', headerName: '优先级', width: 120 },
             { field: 'info', headerName: '任务明细', width: 800 },
@@ -65,7 +70,7 @@ const data: TaskViewData = {
             field: 'title',
             width: 300,
         },
-        groupDefaultExpanded: -1,
+        // groupDefaultExpanded: -1,
         onGridReady(event: GridReadyEvent) {
             data.api = event.api;
         },
@@ -160,12 +165,13 @@ function toTreeData(data: Array<any>) {
                     info: `报文类型: ${device.packetType}, 报文目标点: ${device.packetEndPoint}, 报文内容: ${device.packetPayload}, 执行器ID: ${device.deviceItemId}`,
                     children: [],
                 };
-                // planNode.children.push(deviceNode);
+                planNode.children.push(deviceNode);
                 tree.push(deviceNode);
             }
-            // bizNode.children.push(planNode);
+            bizNode.children.push(planNode);
             tree.push(planNode);
         }
+        bizNode.progress = `${bizNode.children.filter(item => item.status === PlanTaskStatus.FINISHED).length}/${bizNode.children.length}`;
         tree.push(bizNode);
     }
     return tree;
@@ -190,10 +196,27 @@ export type {
 </script>
 
 <template>
-    <div class="task-view">
+    <div class="task-view flex-column-container">
+        <div class="tools flex-item-fixed flex-row-container">
+            <ElButton :icon="Refresh" :loading="state.loading" @click="reload">刷新</ElButton>
+            <div class="flex-row-container flex-align-items-center">
+                <div class="flex-item-fixed" style="padding-right: 4px;">自动追踪:</div>
+                <ElSwitch
+                    class="flex-item-fixed"
+                    v-model="state.automaticTracking"
+                    inline-prompt
+                    active-text="开启"
+                    inactive-text="关闭"
+                />
+            </div>
+            <div class="flex-row-container flex-align-items-center">
+                <div class="flex-item-fixed" style="padding-right: 4px;">筛选过滤:</div>
+                <ElInput class="flex-item-fixed" placeholder="关键字"/>
+            </div>
+        </div>
         <AgGridVue
             ref="gridRef"
-            :class="['ag-theme-alpine', 'yv-table', 'hi-light-selected-row','allow-vertical-line', 'grid1']"
+            :class="['ag-theme-alpine', 'yv-table', 'hi-light-selected-row','allow-vertical-line', 'flex-item-fill','grid1']"
             v-bind="{...data.gridSetting}"
             :modelValue="state.grid1Data"
         >
@@ -206,7 +229,12 @@ export type {
     height: 100%;
 }
 
-.task-view > .grid1 {
+.tools {
-    height: 100%;
+    padding: 8px;
+    column-gap: 8px;
+}
+
+.task-view .grid1 {
+
 }
 </style>

src/router/index.ts

@@ -32,7 +32,7 @@ const router = createRouter({
                             meta: {
                                 title: '任务查询'
                             },
-                            component: () => import('@/views/taskManagement/taskQuery.vue')
+                            component: () => import('@/editor/widgets/task/TaskView2.vue')
                         },
                         {
                             path: '/automatedPresentation',