diff --git a/src/api/closeLoopDispose/index.js b/src/api/closeLoopDispose/index.js
index 07c847c..8fd0aa2 100644
--- a/src/api/closeLoopDispose/index.js
+++ b/src/api/closeLoopDispose/index.js
@@ -23,4 +23,12 @@ export function get_backlog(data) {
         method: 'post',
         data
     })
+}
+// 待办任务查询 
+export function get_backlog_company_tree(params) {
+    return request({
+        url: '/system/dept/list',
+        method: 'get',
+        params
+    })
 }
\ No newline at end of file
diff --git a/src/assets/companyFile/230091.png b/src/assets/companyFile/230091.png
new file mode 100644
index 0000000..9b7d2e9
Binary files /dev/null and b/src/assets/companyFile/230091.png differ
diff --git a/src/views/closeLoopDispose/components/backlogDetailDialog.vue b/src/views/closeLoopDispose/components/backlogDetailDialog.vue
new file mode 100644
index 0000000..dbac3ed
--- /dev/null
+++ b/src/views/closeLoopDispose/components/backlogDetailDialog.vue
@@ -0,0 +1,148 @@
+<template>
+  <!-- 请选择抄送部门 -->
+  <el-dialog
+    class="dialog"
+    title="请选择抄送部门"
+    :visible.sync="visible"
+    :close-on-click-modal="false"
+    width="600px"
+    @close="close"
+  >
+    <div class="tree_title">宁波市公安局镇海分局</div>
+    <div class="tree_body">
+      <div class="tree_input">
+        <el-input
+          v-model="section_search"
+          placeholder="请输入部门名称查询"
+        ></el-input>
+        <div class="section_btn" @click="handle_click()">
+          <i class="el-icon-search"></i>
+        </div>
+      </div>
+    </div>
+    <div class="form_btn" slot="footer">
+      <el-button @click="save_delete">取 消</el-button>
+      <el-button @click="close">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { get_backlog_company_tree } from "@/api/closeLoopDispose";
+export default {
+  name: "backlogDetailDialog",
+  data() {
+    return {
+      visible: false,
+      section_search: "",
+    };
+  },
+  methods: {
+    open() {
+      this.visible = true;
+    },
+    handle_click() {
+      let param = {
+        deptName: this.section_search,
+      };
+      get_backlog_company_tree(param).then(res=>{
+        console.log('res_ppp',res);
+      });
+    },
+    save_delete() {},
+    close() {
+      this.visible = false;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.el-dialog {
+  .el-dialog__title {
+    color: #fff;
+    font-size: 19px;
+    text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+  }
+  background-image: url("~@/assets/companyFile/dialogBack.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  height: 800px;
+  /* 关闭弹窗叉号 */
+  .el-dialog__headerbtn {
+    .el-dialog__close {
+      color: #e55b5b;
+      font-size: 18px;
+      font-weight: 500;
+    }
+  }
+  .el-dialog__body {
+    padding: 0px;
+    padding-left: 15px;
+    padding-right: 15px;
+    .tree_title {
+      color: #fff;
+      margin-top: 3vh;
+      font-size: 19px;
+      //   border: 1px solid #4a6072;
+    }
+    .tree_body {
+      margin-top: 1vh;
+      height: 600px;
+      border: 1px solid #4a6072;
+      background: url("~@/assets/companyFile/09091.png") no-repeat;
+      background-size: 100% 100%;
+      .tree_input {
+        display: flex;
+        border: 0.1px solid #5b748c;
+        margin-left: 8px;
+        margin-top: 10px;
+        width: 550px;
+        .el-input__inner {
+          //   margin-left: 8px;
+          //   margin-top: 10px;
+          width: 500px;
+          border-radius: 0px;
+          background: rgba(0, 0, 0, 0);
+          color: #fff;
+          border: 0.1px solid #5b748c;
+        }
+        /* 查询框点击颜色变化 */
+        .el-input__inner:focus,
+        .el-input__inner:hover {
+          border-color: #5b748c;
+        }
+        .section_btn {
+          width: 50px;
+          border-radius: 0px;
+          background: #0e3936;
+          text-align: center;
+          font-size: 28px;
+          border: 0.1px solid #5b748c;
+          cursor: pointer;
+          .el-icon-search {
+            color: #fff;
+            padding: 12% 0;
+          }
+        }
+        .section_btn:focus,
+        .section_btn:hover {
+          /* 放大镜点击特效 */
+          background: #126a58;
+        }
+      }
+    }
+  }
+  .el-button {
+    width: 120px;
+    border: 1px solid #4a6072;
+    color: #fff;
+    border-radius: 0px !important;
+    background: #323f43;
+  }
+  .el-button:focus,
+  .el-button:hover {
+    color: #34e1b3;
+    background: url("~@/assets/companyFile/btn05.png") no-repeat !important;
+    background-size: 100% 100% !important;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/closeLoopDispose/components/backlogDetailForm.vue b/src/views/closeLoopDispose/components/backlogDetailForm.vue
index bd70c07..165a4c7 100644
--- a/src/views/closeLoopDispose/components/backlogDetailForm.vue
+++ b/src/views/closeLoopDispose/components/backlogDetailForm.vue
@@ -71,7 +71,7 @@
             <el-input
               v-model="form.section"
             >
-            <i slot="suffix" class="el-input__icon el-icon-date" @click="handle_click()"></i>
+            <i slot="suffix" class="el-input__icon el-icon-search" @click="handle_click()"></i>
             </el-input>
           </el-form-item>
           <el-form-item>
@@ -127,12 +127,17 @@
         </div>
       </div>
     </div>
+    <BacklogDetailDialog ref="backlogDetailDialog"></BacklogDetailDialog>
   </div>
 </template>
   <script>
+import BacklogDetailDialog from './backlogDetailDialog'
 import { get_my_course_record } from "@/api/closeLoopDispose";
 export default {
   name: "BacklogDetailForm",
+  components:{
+    BacklogDetailDialog,
+  },
   props: {
     backlog_detail: {},
   },
@@ -210,7 +215,7 @@ export default {
   },
   methods: {
     handle_click() {
-      console.log('11111');
+      this.$refs.backlogDetailDialog.open()
     },
   },
 };
diff --git a/src/views/closeLoopDispose/components/backlogDetailRecords.vue b/src/views/closeLoopDispose/components/backlogDetailRecords.vue
index e69de29..6a2a340 100644
--- a/src/views/closeLoopDispose/components/backlogDetailRecords.vue
+++ b/src/views/closeLoopDispose/components/backlogDetailRecords.vue
@@ -0,0 +1,303 @@
+<template>
+  <!-- 流程记录 -->
+  <div class="record_body">
+    <div class="all_step">
+      <div class="record_step" v-for="item in record_list" :key="item.taskId">
+        <!-- 侧边进度图标 -->
+        <div class="step">
+          <div class="step_icon">
+            <!-- assigneeId为空的时候为待选图标,为数值的时候为确定图标 -->
+            <i v-if="item.assigneeId != ''" class="el-icon-success"></i>
+            <i v-else class="el-icon-time"></i>
+          </div>
+          <!-- 进度线 -->
+          <div class="step_line"></div>
+        </div>
+        <div class="step_table">
+          <div class="step_table_top">
+            <div class="step_table_top_name">{{ item.taskName }}</div>
+            <div class="step_table_top_opeartion">
+              <div class="opeartion_num">
+                <div class="opeartion_num_text">操作者总计:</div>
+                <div class="opeartion_num_val">{{ item.doTotal }}</div>
+              </div>
+              <div class="opeartion_num">
+                <div class="opeartion_num_text">已操作:</div>
+                <div class="opeartion_num_val">
+                  {{ item.finishTotal }}
+                </div>
+              </div>
+              <div class="opeartion_num">
+                <div class="opeartion_num_text">未操作:</div>
+                <div class="not_opeartion_num_val">
+                  {{ item.todoTotal }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <el-table
+            height="250"
+            :data="item.historyTaskList"
+            :header-cell-style="table_header"
+            :cell-style="{ background: 'revert', 'text-align': 'center' }"
+          >
+            <el-table-column prop="assigneeName" label="实际办理" width="280">
+            </el-table-column>
+            <el-table-column prop="candidate" label="候选办理" width="280">
+            </el-table-column>
+            <el-table-column prop="type" label="操作状态" width="280">
+            </el-table-column>
+            <el-table-column prop="finishTime" label="接收时间" width="280">
+            </el-table-column>
+            <el-table-column
+              prop="createTime"
+              label="操作时间"
+              width="280"
+            >
+            </el-table-column>
+            <el-table-column prop="duration" label="耗时"> </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { get_my_course_record } from "@/api/closeLoopDispose";
+export default {
+  name: "BacklogDetailRecords",
+  props: {
+    backlog_detail: {},
+  },
+  data() {
+    return {
+      record_list: [
+        // {
+        //   id: "1",
+        //   name: "卫健部门",
+        //   opeartion_num: "2",
+        //   have_opeartion_num: "1",
+        //   not_opeartion_num: "1",
+        //   table_list: [
+        //     {
+        //       change: "吴沁",
+        //       under_change: "治安大队",
+        //       type: "已操作",
+        //       load_time: "2023-06-06 12:53:30",
+        //       time: "2023-06-06 12:53:30",
+        //       use_time: "2秒",
+        //     },
+        //   ],
+        // },
+        // {
+        //   id: "2",
+        // },
+        // {
+        //   id: "3",
+        //   name: "发布人",
+        // },
+      ],
+      src: require("../../../assets/companyFile/loadtrue.png"),
+      icon_show: true, // 控制图标显示隐藏
+      step_line_show: true,
+    };
+  },
+  created() {
+    console.log("backlog_detail2", this.backlog_detail);
+    let param = {
+      definitionId: this.backlog_detail.procDefId,
+      deployId: this.backlog_detail.deployId,
+      procInsId: this.backlog_detail.procInsId,
+      taskId: this.backlog_detail.taskId,
+    };
+    get_my_course_record(param).then((res) => {
+      this.record_list = res.data.wfDetailVo.recordList;
+      console.log("this.record_list", this.record_list);
+      // for(let i = 0; i < this.record_list.length;i++) {
+      //   if ( i + 1 == this.record_list.length )  {
+      //     this.step_line_show = false
+      //   } else {
+      //     this.step_line_show = true
+      //   }
+      //   console.log('i + 1', i + 1);
+      //   console.log('this.record_list', this.record_list.length);
+      // }
+    });
+  },
+  methods: {
+    // 表头样式
+    table_header({ row, rowIndex }) {
+      console.log(row);
+      console.log(rowIndex);
+      return {
+        "text-align": "center", // 表头文字居中
+        color: "#fff",
+        border: "0.1px solid #3b4f5c",
+      };
+    },
+  },
+};
+</script>
+<style lang='less' scoped>
+.record_body {
+  width: 95.9vw;
+  height: 70vh;
+  background: url("~@/assets/companyFile/09091.png") no-repeat !important;
+  background-size: 100% 100% !important;
+  overflow-y: scroll;
+}
+.record_body::-webkit-scrollbar {
+  display: none;
+  width: 6px;
+  background-color: #5e666a;
+  border-radius: 4px;
+}
+
+.record_body::-webkit-scrollbar-thumb {
+  display: none;
+  width: 5px;
+  background-color: #3c4b4a;
+  border-radius: 4px;
+}
+.all_step {
+  margin-top: 1vh;
+}
+/* 不固定高度，给自由展示空间 */
+.record_step {
+  width: 94vw;
+  height: 31vh;
+  margin-left: 1vw;
+  //   border: 0.1px solid #3f5564;
+  display: flex;
+  .step {
+    width: 30px;
+    // margin-top: 10%;
+    margin-left: 1vw;
+    height: 100%;
+    // border: 0.1px solid #fff;
+    display: flex;
+    flex-direction: column;
+    .step_icon {
+      width: 30px;
+      height: 30px;
+      //   border: 0.1px solid #fff;
+      border-radius: 50%;
+      .el-icon-success {
+        font-size: 30px;
+        color: #41ffc4;
+      }
+      .el-icon-time {
+        font-size: 30px;
+        color: #38eafc;
+      }
+    }
+    .step_line {
+      flex-grow: 1;
+      width: 2px;
+      background: #56808f;
+      margin: auto;
+    }
+  }
+  .step_table {
+    margin-left: 1vw;
+    // border: 0.1px solid #fff;
+    width: 90vw;
+    // height: 30vh;
+    .step_table_top {
+      //   border: 0.1px solid #fff;
+      width: 90vw;
+      height: 5vh;
+      display: flex;
+      justify-content: space-between;
+      .step_table_top_name {
+        width: 10vw;
+        color: #fff;
+        text-align: left;
+        font-size: 19px;
+        line-height: 3.5vh;
+        height: 5vh;
+        text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+      }
+      .step_table_top_opeartion {
+        width: 21vw;
+        height: 5vh;
+        // border: 0.1px solid #fff;
+        display: flex;
+        .opeartion_num {
+          width: 7vw;
+          height: 5vh;
+          display: flex;
+          .opeartion_num_text {
+            width: 4vw;
+            height: 5vh;
+            color: #fff;
+            font-size: 16px;
+            line-height: 5vh;
+            text-align: center;
+          }
+          .opeartion_num_val {
+            width: 3vw;
+            height: 5vh;
+            color: #fff;
+            font-size: 16px;
+            line-height: 5vh;
+            text-align: center;
+          }
+          .not_opeartion_num_val {
+            width: 3vw;
+            height: 5vh;
+            color: #e75c5d;
+            font-size: 16px;
+            line-height: 5vh;
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+}
+/deep/.el-table {
+  //   width: 96vw;
+  height: 25vh;
+  background: rgba(0, 0, 0, 0);
+  border: 0.1px solid #3f5564;
+  thead {
+    color: #fff;
+    font-weight: 500;
+    border: 0.1px solid #3f5564;
+    background: linear-gradient(
+      to right,
+      #284f49,
+      #2f6363 5%,
+      #233b38 80%
+    ) !important;
+
+    & th {
+      background-color: transparent;
+    }
+
+    & tr {
+      background-color: transparent;
+    }
+  }
+  tr {
+    color: #fff;
+    background: rgba(0, 0, 0, 0);
+  }
+}
+/deep/ .el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+  border: 0.1px solid #3f5564;
+}
+/deep/.el-table__body-wrapper::-webkit-scrollbar {
+  width: 6px;
+  background-color: #5e666a;
+  border-radius: 4px;
+}
+
+/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
+  width: 5px;
+  background-color: #3c4b4a;
+  border-radius: 4px;
+}
+</style>
\ No newline at end of file