diff --git a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/history-timeline-item.vue b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/history-timeline-item.vue
index 50a52a16..9e2fdfab 100644
--- a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/history-timeline-item.vue
+++ b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/history-timeline-item.vue
@@ -28,6 +28,9 @@ export default defineComponent({
         return {};
       }
     },
+    historyId: {
+      type: Number
+    },
     type: {
       type: String,
       default: "icon"
@@ -59,7 +62,7 @@ export default defineComponent({
         okText: "确认",
         cancelText: "取消",
         onOk: async () => {
-          await api.Cancel(props.runnable.id);
+          await api.Cancel(props.historyId);
           notification.success({
             message: "任务取消成功"
           });
diff --git a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/index.vue b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/index.vue
index fecdc43d..531f292c 100644
--- a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/index.vue
+++ b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/index.vue
@@ -81,11 +81,11 @@
                       <fs-icon v-if="editMode" class="add-stage-btn" title="添加新阶段" icon="ion:add-circle" @click="stageAdd(index)"></fs-icon>
                     </div>
                     <div class="task">
-                        <a-button shape="round" @click="taskEdit(stage, index, task, taskIndex)">
-                          {{ task.title }}
-                          <pi-status-show :status="task.status?.result"></pi-status-show>
-                        </a-button>
-                        <fs-icon class="copy" v-if="editMode" title="复制" icon="ion:copy-outline" @click="taskCopy(stage, index, task)"></fs-icon>
+                      <a-button shape="round" @click="taskEdit(stage, index, task, taskIndex)">
+                        {{ task.title }}
+                        <pi-status-show :status="task.status?.result"></pi-status-show>
+                      </a-button>
+                      <fs-icon v-if="editMode" class="copy" title="复制" icon="ion:copy-outline" @click="taskCopy(stage, index, task)"></fs-icon>
                     </div>
                   </div>
                   <div v-if="editMode" class="task-container is-add">
@@ -99,7 +99,6 @@
                           并行任务
                         </a-button>
                       </a-tooltip>
-
                     </div>
                   </div>
                 </div>
@@ -188,7 +187,14 @@
         <a-page-header title="运行历史" sub-title="点任务可查看日志" class="logs-block">
           <a-timeline class="mt-10">
             <template v-for="item of histories" :key="item.id">
-              <pi-history-timeline-item :runnable="item.pipeline" :is-current="currentHistory?.id === item.id" :edit-mode="editMode" @view="historyView(item)" @cancel="historyCancel()"></pi-history-timeline-item>
+              <pi-history-timeline-item
+                :runnable="item.pipeline"
+                :history-id="item.id"
+                :is-current="currentHistory?.id === item.id"
+                :edit-mode="editMode"
+                @view="historyView(item)"
+                @cancel="historyCancel()"
+              ></pi-history-timeline-item>
             </template>
             <a-empty v-if="histories.length === 0"> </a-empty>
           </a-timeline>
@@ -373,7 +379,7 @@ export default defineComponent({
 
       const taskView = useTaskView();
 
-      const taskAdd = (stage: any, stageIndex: number, onSuccess?: any,taskDef?:any) => {
+      const taskAdd = (stage: any, stageIndex: number, onSuccess?: any, taskDef?: any) => {
         currentStageIndex.value = stageIndex;
         currentTaskIndex.value = stage.tasks.length;
         taskFormRef.value.taskAdd((type: any, value: any) => {
@@ -383,17 +389,17 @@ export default defineComponent({
               onSuccess();
             }
           }
-        },taskDef);
+        }, taskDef);
       };
 
-      const taskCopy = (stage: any, stageIndex: number, task: any ) => {
-        task = _.cloneDeep(task)
-        task.id = nanoid()
-        task.title= task.title+"_copy"
+      const taskCopy = (stage: any, stageIndex: number, task: any) => {
+        task = _.cloneDeep(task);
+        task.id = nanoid();
+        task.title = task.title + "_copy";
         for (const step of task.steps) {
-          step.id = nanoid()
+          step.id = nanoid();
         }
-        taskAdd(stage,stageIndex,null,task)
+        taskAdd(stage, stageIndex, null, task);
       };
 
       const taskEdit = (stage: any, stageIndex: number, task: any, taskIndex: number, onSuccess?: any) => {
@@ -423,7 +429,7 @@ export default defineComponent({
         }
       };
 
-      return { taskAdd, taskEdit, taskCopy,taskFormRef, ...taskView };
+      return { taskAdd, taskEdit, taskCopy, taskFormRef, ...taskView };
     }
 
     function useStage(useTaskRet: any) {
@@ -760,10 +766,10 @@ export default defineComponent({
               height: 100%;
               z-index: 2;
 
-              .copy{
+              .copy {
                 position: absolute;
-                right:60px;
-                top:18px;
+                right: 60px;
+                top: 18px;
                 cursor: pointer;
                 &:hover {
                   color: #1890ff;
diff --git a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/utils/util.status.ts b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/utils/util.status.ts
index bd012d8b..2fb24e32 100644
--- a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/utils/util.status.ts
+++ b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/utils/util.status.ts
@@ -36,6 +36,13 @@ const StatusEnum: StatusEnumType = {
     spin: true,
     icon: "ant-design:sync-outlined"
   },
+  canceled: {
+    value: "canceled",
+    label: "已取消",
+    color: "yellow",
+    spin: true,
+    icon: "ant-design:minus-circle-twotone"
+  },
   none: {
     value: "none",
     label: "未运行",
diff --git a/packages/ui/certd-server/src/modules/pipeline/service/pipeline-service.ts b/packages/ui/certd-server/src/modules/pipeline/service/pipeline-service.ts
index 38442db1..ba5e33f6 100644
--- a/packages/ui/certd-server/src/modules/pipeline/service/pipeline-service.ts
+++ b/packages/ui/certd-server/src/modules/pipeline/service/pipeline-service.ts
@@ -236,14 +236,18 @@ export class PipelineService extends BaseService<PipelineEntity> {
     }
   }
 
-  async cancel(historyId: number) {
+  async cancel(historyId) {
     const executor = runningTasks.get(historyId);
     if (executor) {
       await executor.cancel();
     } else {
       const entity = await this.historyService.info(historyId);
+      if(entity == null){
+        return
+      }
       const pipeline: Pipeline = JSON.parse(entity.pipeline);
       pipeline.status.status = ResultType.canceled;
+      pipeline.status.result = ResultType.canceled;
       const runtime = new RunHistory(historyId, null, pipeline);
       await this.saveHistory(runtime);
     }
@@ -291,6 +295,7 @@ export class PipelineService extends BaseService<PipelineEntity> {
     const entity: HistoryEntity = new HistoryEntity();
     entity.id = parseInt(history.id);
     entity.userId = history.pipeline.userId;
+    entity.status = pipelineEntity.status
     entity.pipeline = JSON.stringify(history.pipeline);
     entity.pipelineId = parseInt(history.pipeline.id);
     await this.historyService.save(entity);