From ebc722bd84e4bae5ed5e2fa982344dc5d08c0155 Mon Sep 17 00:00:00 2001
From: lukeyan <1727408482@qq.com>
Date: Tue, 20 Jun 2023 17:06:12 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=AD=E7=8E=AF=E5=BE=85=E5=8A=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/request.js                          |   1 +
 .../closeLoopDispose/components/backlog.vue   | 400 ++++++++++++++++++
 .../components/backlogDetail.vue              |  89 ++++
 .../components/backlogDetailForm.vue          | 363 ++++++++++++++++
 .../components/backlogDetailPicture.vue       | 130 ++++++
 .../components/backlogDetailRecords.vue       |   0
 .../closeLoopDispose/components/myCourse.vue  |   6 +-
 .../components/myCourseDetailForm.vue         |  43 +-
 .../components/myCourseDetailRecords.vue      |  46 +-
 src/views/closeLoopDispose/index.vue          |  29 +-
 10 files changed, 1073 insertions(+), 34 deletions(-)
 create mode 100644 src/views/closeLoopDispose/components/backlogDetail.vue
 create mode 100644 src/views/closeLoopDispose/components/backlogDetailForm.vue
 create mode 100644 src/views/closeLoopDispose/components/backlogDetailPicture.vue
 create mode 100644 src/views/closeLoopDispose/components/backlogDetailRecords.vue

diff --git a/src/utils/request.js b/src/utils/request.js
index d1c0520..17c8c35 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -5,6 +5,7 @@ import { getToken } from '@/utils/auth'
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 const request = axios.create({
   //baseURL: 'http://172.18.113.50:8080/zhapi',
+  //baseURL: 'http://172.18.113.13:8080/zhapi', // 孙强
   //baseURL: 'http://192.168.0.188:8888/zhapi',
   baseURL: `http://${window.location.host}/zhapi`,
   timeout: 50000,
diff --git a/src/views/closeLoopDispose/components/backlog.vue b/src/views/closeLoopDispose/components/backlog.vue
index e69de29..8621ac3 100644
--- a/src/views/closeLoopDispose/components/backlog.vue
+++ b/src/views/closeLoopDispose/components/backlog.vue
@@ -0,0 +1,400 @@
+<template>
+  <!-- 代办任务 -->
+  <div>
+    <div class="backlog_body">
+      <div class="search_top">
+        <div class="btn">
+          <el-button @click="search_data">搜索</el-button>
+          <el-button @click="reset">重置</el-button>
+        </div>
+        <el-form :model="search" class="search_top_form">
+          <el-form-item label="创建时间">
+            <el-date-picker
+              v-model="search.backlog_time"
+              type="datetimerange"
+              :picker-options="pickerOptions"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="关键字">
+            <el-input
+              v-model="search.word"
+              placeholder="请选择关键词"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="search_table">
+        <el-table
+          :data="table_data"
+          :header-cell-style="table_header"
+          :cell-style="{ background: 'revert', 'text-align': 'center' }"
+        >
+          <el-table-column prop="procDefName" label="流程名称" width="420">
+          </el-table-column>
+          <el-table-column prop="createTime" label="创建时间" width="280">
+          </el-table-column>
+          <el-table-column prop="course_type" label="流程类型" width="280">
+          </el-table-column>
+          <el-table-column prop="course_status" label="流程状态" width="220">
+            <template slot-scope="scope">
+              <div :style="{ color: styleChange(scope.row.course_status) }">
+                {{ scope.row.course_status }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="taskName" label="当前节点" width="220">
+          </el-table-column>
+          <el-table-column prop="nextNodeUsers" label="未操作者" width="280">
+          </el-table-column>
+          <el-table-column prop="operation" label="操作">
+            <template slot-scope="scope">
+              <el-button
+                size="small"
+                class="operation"
+                @click="check_details(scope.row)"
+                >处置
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页 -->
+        <div class="table_pagination">
+          <el-pagination
+            :background="true"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :page-sizes="[5, 10]"
+            :page-size="pageSize"
+            :current-page="pageNum"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Backlog",
+  data() {
+    return {
+      search: {
+        backlog_time: [this.get_today(), this.get_tomorrow()],
+        word: "",
+      },
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      table_data: [],
+      pageSize: 10,
+      pageNum: 1,
+      total: 0,
+    };
+  },
+  methods: {
+    search_data() {
+      let param = {
+        pageSize: this.pageSize,
+        page: this.pageNum,
+        startTime:
+          this.search.course_time == null
+            ? ""
+            : this.dateConversion(this.search.course_time[0]),
+        endTime:
+          this.search.course_time == null
+            ? ""
+            : this.dateConversion(this.search.course_time[1]),
+        searchKey: this.search.word,
+      };
+      console.log(param);
+    },
+    reset() {
+      this.search.course_status = "";
+      this.search.course_time = [this.get_today(), this.get_tomorrow()];
+      this.search.word = "";
+    },
+    // 获取当前时间
+    get_today() {
+      let date = new Date();
+      let y = date.getFullYear();
+      let m = date.getMonth() + 1;
+      m = m < 10 ? "0" + m : m;
+      let d = date.getDate();
+      d = d < 10 ? "0" + d : d;
+      let dateTime =
+        y + "-" + m + "-" + d + " " + "00" + ":" + "00" + ":" + "00";
+      return dateTime;
+    },
+    // 获取明天时间
+    get_tomorrow() {
+      let date = new Date();
+      let y = date.getFullYear();
+      let m = date.getMonth() + 1;
+      m = m < 10 ? "0" + m : m;
+      let d = date.getDate() + 1;
+      d = d < 10 ? "0" + d : d;
+      let dateTime =
+        y + "-" + m + "-" + d + " " + "00" + ":" + "00" + ":" + "00";
+      return dateTime;
+    },
+    // 处置点击跳转
+    check_details(val) {
+      this.$emit("change_backlog_detail", val); // 通知跳转
+    },
+    // 表头样式
+    table_header({ row, rowIndex }) {
+      console.log(row);
+      console.log(rowIndex);
+      return {
+        "text-align": "center", // 表头文字居中
+        color: "#fff",
+        border: "0.1px solid #3b4f5c",
+      };
+    },
+    // 跟后端返回判断流程状态颜色
+    styleChange(val) {
+      switch (val) {
+        case "进行中":
+          return "#3eba75";
+        // case "yellow":
+        //   return "#FDA722";
+        case "处置成功":
+          return "#2eb9ef";
+        case "处置失败":
+          return "#e55b5b";
+      }
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      this.pageNum = 1;
+      this.pageSize = val;
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.pageNum = val;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.el-table {
+  //   width: 96vw;
+  height: 60vh;
+  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__body-wrapper::-webkit-scrollbar {
+  display: none;
+  width: 6px;
+  background-color: #5e666a;
+  border-radius: 4px;
+}
+/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
+  display: none;
+  width: 5px;
+  background-color: #3c4b4a;
+  border-radius: 4px;
+}
+/deep/ .el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+  border: 0.1px solid #3f5564;
+}
+/deep/.el-button.operation {
+  background-color: #182527;
+  border: 0px;
+  color: #2fabdc;
+}
+
+/deep/.el-button.operation:hover,
+.el-button.operation:focus {
+  background-color: #182527;
+  border: 0px;
+  color: #2fabdc;
+  text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+}
+.backlog_body {
+  height: 72vh;
+  .search_top {
+    width: 96vw;
+    height: 5vh;
+    // border: 0.1px solid #2f6363;
+    display: flex;
+    flex-direction: row-reverse;
+    /deep/.el-form {
+      display: flex;
+      .el-form-item {
+        display: flex;
+        margin-left: 0.5vw;
+        .el-date-editor--daterange.el-input__inner {
+          width: 440px;
+        }
+      }
+      .el-form-item__label {
+        text-align: center;
+        color: #fff;
+      }
+      .el-form-item__content {
+        .el-input__inner {
+          // width: 300px;
+          border-radius: 0px;
+          border: 1px solid #3d505e;
+          // border: 0.5px dashed;
+          background: #283436;
+          color: #fff;
+        }
+
+        /* 查询框点击颜色变化 */
+        .el-input__inner:focus,
+        .el-input__inner:hover {
+          border-color: #1b3736;
+        }
+        .el-range-input {
+          color: #fff;
+          background: #283436;
+        }
+      }
+    }
+    /deep/.el-range-separator {
+      color: #fff;
+      width: 10%;
+    }
+    /deep/.el-input__icon.el-range__close-icon {
+      display: none;
+    }
+    .btn {
+      margin-left: 8px;
+      margin-right: 2px;
+      .el-button {
+        width: 70px;
+        height: 3.7vh !important;
+        border: 1px solid #4a6072;
+        color: #fff;
+        border-radius: 0px !important;
+        background: #323f43;
+      }
+      .el-button:focus,
+      .el-button:hover {
+        color: #34e1b3;
+        border: 2px solid #137868;
+        background: url("~@/assets/companyFile/2121.png") no-repeat !important;
+        background-size: 100% 100% !important;
+      }
+    }
+  }
+}
+.table_pagination {
+  width: 96vw;
+  height: 5vh;
+  display: flex;
+  flex-direction: row-reverse;
+  /deep/.el-input--suffix .el-input__inner {
+    color: #fff;
+    border: 0.1px solid #277f79;
+    border-radius: 0px;
+    background: rgba(0, 0, 0, 0);
+    width: 5vw;
+    height: 2.6vh;
+    line-height: 2.6vh;
+  }
+  /deep/.el-input__icon {
+    color: #fff;
+    line-height: 2.6vh;
+    height: 2.6vh;
+  }
+  /deep/.el-pagination {
+    margin-top: 1vh;
+    .el-pagination__total {
+      color: #fff;
+    }
+    .el-input__inner {
+      border-radius: 0px;
+      border: 0.1px solid #28847e;
+      background: #3c4b4a;
+      color: #fff;
+    }
+    .btn-prev {
+      border-radius: 0px;
+      border: 0.1px solid #28847e;
+      background: #3c4b4a;
+      color: #fff;
+    }
+    ul {
+      li {
+        border: 0.1px solid #28847e;
+        background: #3c4b4a;
+        color: #fff;
+      }
+    }
+    .btn-next {
+      border: 0.1px solid #28847e;
+      border-radius: 0px;
+      background: #3c4b4a;
+      color: #fff;
+    }
+    .el-pager {
+      li {
+        border: 0.1px solid #28847e;
+        background: #3c4b4a !important;
+      }
+    }
+  }
+  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
+    border: 2px solid #76eae4;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/closeLoopDispose/components/backlogDetail.vue b/src/views/closeLoopDispose/components/backlogDetail.vue
new file mode 100644
index 0000000..c1affe2
--- /dev/null
+++ b/src/views/closeLoopDispose/components/backlogDetail.vue
@@ -0,0 +1,89 @@
+<template>
+  <!-- 待办任务详情 -->
+  <div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="表单信息" name="first">
+        <BacklogDetailForm
+          ref="backlogDetailForm"
+          :backlog_detail="backlog_detail"
+        ></BacklogDetailForm>
+      </el-tab-pane>
+      <el-tab-pane label="流程图" name="second">
+        <BacklogDetailPicture ref="backlogDetailPicture"></BacklogDetailPicture>
+      </el-tab-pane>
+      <el-tab-pane label="流转记录" name="third">
+        <BacklogDetailRecords
+          ref="backlogDetailRecords"
+          :backlog_detail="backlog_detail"
+        ></BacklogDetailRecords>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script>
+import BacklogDetailForm from "./backlogDetailForm";
+import BacklogDetailPicture from "./backlogDetailPicture";
+import BacklogDetailRecords from "./backlogDetailRecords";
+export default {
+  name: "BacklogDetail",
+  components: {
+    BacklogDetailForm,
+    BacklogDetailPicture,
+    BacklogDetailRecords,
+  },
+  props: {
+    backlog_detail: {}, // -> 从backlog传过来的单条表格详情数据
+  },
+  data() {
+    return {
+      activeName: "first",
+    };
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.el-tabs__active-bar.is-top {
+  display: none;
+  background: #33cccc;
+}
+/deep/.el-tabs__nav-wrap::after {
+  height: 1px;
+  background: #5b748c;
+}
+/deep/.el-tabs__item.is-top {
+  color: #fff;
+  font-size: 17px;
+  padding-left: 20px !important;
+  padding-right: 20px;
+  //   margin-right: 20px;
+}
+/deep/.el-tabs__item.is-top.is-active {
+  padding-left: 20px;
+  padding-right: 20px;
+  color: #fff;
+  font-size: 17px;
+  border-bottom: 4px solid #33cccc;
+  text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0),
+    #3a5856,
+    #3b746c
+  ) !important;
+}
+/deep/.el-tabs__item.is-top:focus,
+.el-tabs__item.is-top:hover {
+  padding-left: 20px;
+  padding-right: 20px;
+  color: #fff;
+  font-size: 17px;
+  border-bottom: 4px solid #33cccc;
+  text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0),
+    #3a5856,
+    #3b746c
+  ) !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/closeLoopDispose/components/backlogDetailForm.vue b/src/views/closeLoopDispose/components/backlogDetailForm.vue
new file mode 100644
index 0000000..c7187b5
--- /dev/null
+++ b/src/views/closeLoopDispose/components/backlogDetailForm.vue
@@ -0,0 +1,363 @@
+<template>
+  <!-- 处置详情的表单信息 -->
+  <div class="tab_body">
+    <div class="basic_message">
+      <div class="basic_message_title">基本信息</div>
+      <div class="basic_message_body">
+        <div class="basic_message_text_one">
+          <div class="basic_message_text">流程名称:</div>
+          <div class="basic_message_text">流程类型:</div>
+          <div class="basic_message_text">预警时间:</div>
+          <div class="basic_message_text">预警等级:</div>
+        </div>
+        <!-- 此列为数据展示 -->
+        <div class="basic_message_value_one">
+          <div class="basic_message_value">
+            {{ this.basic_message.processName }}
+          </div>
+          <div class="basic_message_value">
+            {{ this.basic_message.processType }}
+          </div>
+          <div class="basic_message_value">
+            {{ this.basic_message.alarmTime }}
+          </div>
+          <div class="basic_message_value"></div>
+        </div>
+        <div class="basic_message_text_two">
+          <div class="basic_message_text">企业名称:</div>
+          <div class="basic_message_text">流程状态:</div>
+          <div class="basic_message_text">预警指标:</div>
+        </div>
+        <!-- 此列为数据展示 -->
+        <div class="basic_message_value_two">
+          <div class="basic_message_value_tag">
+            {{ this.basic_message.companyName }}
+          </div>
+          <div class="basic_message_value"></div>
+          <div class="basic_message_value">
+            {{ this.basic_message.alarmName }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="backlog_idea">
+      <div class="backlog_idea_title">流转意见</div>
+      <div class="backlog_idea_body">
+        <!-- 遍历展示人员信息 -->
+        <div
+          v-for="item in backlog_list"
+          :key="item.id"
+          class="backlog_idea_person"
+        >
+          <div class="backlog_idea_person_img">
+            <el-image :src="item.personUrl">
+              <div slot="error" class="image-slot">
+                <img src="../../../assets/companyFile/avatar.png" alt="" />
+              </div>
+            </el-image>
+            <div class="backlog_idea_person_information">
+              <div class="backlog_idea_person_name">{{ item.name }}</div>
+              <div class="backlog_idea_person_team">{{ item.team }}</div>
+            </div>
+          </div>
+          <div class="backlog_idea_person_text">
+            <!-- 第一行，处理意见 -->
+            <div class="dispose_idea">
+              <div class="backlog_text">处理意见:</div>
+              <div class="backlog_value">{{ item.backlog_value }}</div>
+            </div>
+            <!-- 第二行，附件 按需显示或者隐藏 -->
+            <div v-if="attachment_show" class="attachment">
+              <div class="backlog_text">附件:</div>
+              <!-- 此处后面会改为下载图片链接 -->
+              <div class="backlog_value">{{ item.attachment_value }}</div>
+            </div>
+            <!-- 第三行，抄送人 -->
+            <div class="send_person">
+              <div class="backlog_text">抄送人:</div>
+              <div class="backlog_value">{{ item.send_person }}</div>
+            </div>
+            <!-- 第四行，时间 -->
+            <div class="backlog_time">
+              <div class="backlog_text">时间:</div>
+              <div class="backlog_value">{{ item.backlog_time }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+  <script>
+// import { get_my_backlog_record } from "@/api/closeLoopDispose";
+export default {
+  name: "BacklogDetailForm",
+  props: {
+    backlog_detail: {},
+  },
+  data() {
+    return {
+      attachment_show: true, // 附件 按需显示或者隐藏
+      basic_message: {},
+      backlog_list: [
+        {
+          id: "1",
+          personUrl: "../../../assets/companyFile/avatar.png",
+          name: "吴沁",
+          team: "技侦大队",
+          backlog_value:
+            "2022年8月20日0时32分,我队接到预警称浙江浙江鑫甬生物化工股份有限公司存在运输车辆频繁违章情况。接报后值班民警于立即到达现场,经现场了解到:危化品运输车(浙B2M50R)为外来租赁货车,司机王某(身份证号:42109119880717****)疑似前科重点人员。目前司机已经带回所以便进一步调查。2022年8月20日0时32分,我队接到预警称浙江浙江鑫甬生物化工股份有限公司存在运输车辆频繁违章情况。接报后值班民警于立即到达现场,经现场了解到:危化品运输车(浙B2M50R)为外来租赁货车,司机王某(身份证号:42109119880717****)疑似前科重点人员。目前司机已经带回所以便进一步调查。",
+          attachment_value: "20220820现场处置照片.jpg",
+          send_person: "蔡坤、黄毅、李丹丹、张强强",
+          backlog_time: "2022-11-13  12:10:08",
+        },
+        {
+          id: "2",
+          personUrl: "../../../assets/companyFile/avatar.png",
+          name: "吴沁",
+          team: "技侦大队",
+          backlog_value:
+            "2022年8月26日12时许,经过分析,我队决定对浙江浙江鑫甬生物化工股份有限公司的外来租赁危化品运输车(浙B2M50R)司机王某(身份证号:42109119880717****）做出吊销货车驾照处罚，立即执行。",
+        },
+        {
+          id: "3",
+          personUrl: "../../../assets/companyFile/avatar.png",
+          name: "吴沁",
+          team: "技侦大队",
+          backlog_value:
+            "2022年8月26日12时许,经过分析,我队决定对浙江浙江鑫甬生物化工股份有限公司的外来租赁危化品运输车(浙B2M50R)司机王某(身份证号:42109119880717****）做出吊销货车驾照处罚，立即执行。",
+        },
+        {
+          id: "4",
+          personUrl: "../../../assets/companyFile/avatar.png",
+          name: "吴沁",
+          team: "技侦大队",
+          backlog_value:
+            "2022年8月20日0时32分,我队接到预警称浙江浙江鑫甬生物化工股份有限公司存在运输车辆频繁违章情况。接报后值班民警于立即到达现场,经现场了解到:危化品运输车(浙B2M50R)为外来租赁货车,司机王某(身份证号:42109119880717****)疑似前科重点人员。目前司机已经带回所以便进一步调查。2022年8月20日0时32分,我队接到预警称浙江浙江鑫甬生物化工股份有限公司存在运输车辆频繁违章情况。接报后值班民警于立即到达现场,经现场了解到:危化品运输车(浙B2M50R)为外来租赁货车,司机王某(身份证号:42109119880717****)疑似前科重点人员。目前司机已经带回所以便进一步调查。",
+          attachment_value: "20220820现场处置照片.jpg",
+          send_person: "蔡坤、黄毅、李丹丹、张强强",
+          backlog_time: "2022-11-13  12:10:08",
+        },
+      ],
+    };
+  },
+  created() {
+    console.log("send_detail11", this.backlog_detail); // -> 从backlog传过来的单条表格详情数据
+    let param = {
+      definitionId: this.backlog_detail.procDefId,
+      deployId: this.backlog_detail.deployId,
+      procInsId: this.backlog_detail.procInsId,
+      taskId: this.backlog_detail.taskId,
+    };
+    console.log(param);
+    // get_my_backlog_record(param).then((res) => {
+    //   this.basic_message = res.data;
+    // });
+  },
+  methods: {},
+};
+</script>
+  <style lang="less" scoped>
+.tab_body {
+  height: 100%;
+  overflow-y: auto;
+}
+.tab_body::-webkit-scrollbar {
+  display: none;
+  width: 6px;
+  background-color: #5e666a;
+  border-radius: 4px;
+}
+.tab_body::-webkit-scrollbar-thumb {
+  display: none;
+  background-color: #3c4b4a;
+  border-radius: 4px;
+}
+.basic_message {
+  width: 95.9vw;
+  height: 22vh;
+  border: 0.1px solid #3f5564;
+  //   background: url("~@/assets/companyFile/backlog_01.png") no-repeat !important;
+  //   background-size: 100% 100% !important;
+  .basic_message_title {
+    width: 94vw;
+    height: 4vh;
+    margin-left: 1vw;
+    border-bottom: 0.1px solid #3f5564;
+    line-height: 4vh;
+    color: #fff;
+    text-shadow: 0 0 9px #ff8b4e;
+  }
+  .basic_message_body {
+    width: 94vw;
+    height: 16vh;
+    margin-top: 0.5vh;
+    margin-left: 1vw;
+    // border: 0.1px solid #3f5564;
+    display: flex;
+    .basic_message_text_one,
+    .basic_message_text_two {
+      width: 5vw;
+      height: 16vh;
+      // background: #ff8b4e;
+      display: flex;
+      flex-direction: column;
+      .basic_message_text {
+        width: 5vw;
+        height: 4vh;
+        line-height: 4vh;
+        color: rgb(230, 207, 207);
+        text-align: right;
+      }
+    }
+    .basic_message_value_one {
+      width: 30vw;
+      height: 16vh;
+      //   background: #ff8b4e;
+      display: flex;
+      flex-direction: column;
+      .basic_message_value {
+        width: 30vw;
+        height: 4vh;
+        line-height: 4vh;
+        color: #fff;
+        text-align: left;
+      }
+    }
+    .basic_message_value_two {
+      width: 52vw;
+      height: 16vh;
+      //   background: #ff8b4e;
+      display: flex;
+      flex-direction: column;
+      .basic_message_value_tag {
+        // background: #ff8b4e;
+        width: 52vw;
+        height: 4vh;
+        line-height: 4vh;
+        color: #409eff;
+      }
+      .basic_message_value {
+        width: 52vw;
+        height: 4vh;
+        line-height: 4vh;
+        color: #fff;
+        text-align: left;
+      }
+    }
+  }
+}
+.backlog_idea {
+  width: 95.9vw;
+  height: 47vh;
+  margin-top: 2vh;
+  border: 0.1px solid #3f5564;
+  .backlog_idea_title {
+    width: 94vw;
+    height: 4vh;
+    margin-left: 1vw;
+    border-bottom: 0.1px solid #3f5564;
+    line-height: 4vh;
+    color: #fff;
+    text-shadow: 0 0 9px #ff8b4e;
+  }
+}
+.backlog_idea_body {
+  width: 95.9vw;
+  height: 42vh;
+  overflow-y: scroll;
+}
+.backlog_idea_body::-webkit-scrollbar {
+  display: none;
+  width: 6px;
+  background-color: #5e666a;
+  border-radius: 4px;
+}
+
+.backlog_idea_body::-webkit-scrollbar-thumb {
+  display: none;
+  width: 5px;
+  background-color: #3c4b4a;
+  border-radius: 4px;
+}
+/deep/.el-descriptions__header {
+  margin-bottom: 0px;
+  text-shadow: 0 0 9px #ff8b4e;
+  height: 6vh;
+  line-height: 6vh;
+  color: #fff;
+}
+/deep/.el-descriptions__title {
+  margin-left: 10px;
+}
+/deep/.el-descriptions__body {
+  color: #fff;
+  background: rgba(0, 0, 0, 0);
+}
+/deep/.el-descriptions-item.el-descriptions-item__cell {
+  width: 50%;
+}
+/* 个人信息不固定高度，给个人信息自由展示空间 */
+.backlog_idea_person {
+  width: 94vw;
+  border: 0.1px solid #3f5564;
+  background: rgba(209, 199, 199, 0.1);
+  margin-top: 1vh;
+  margin-left: 1vw;
+  display: flex;
+  .backlog_idea_person_img {
+    width: 10vw;
+    height: 7vh;
+    margin-left: 1.5vw;
+    // border: 0.1px solid #3f5564;
+    display: flex;
+    .el-image {
+      margin-top: 0.5vh;
+      width: 2.7vw;
+      height: 5vh;
+      img {
+        width: 2.7vw;
+        height: 5vh;
+      }
+    }
+    .backlog_idea_person_information {
+      margin-left: 1vw;
+      display: flex;
+      flex-direction: column;
+      .backlog_idea_person_name {
+        // color: rgb(230, 207, 207);
+        color: #fff;
+        font-weight: 600;
+        height: 3vh;
+        line-height: 3vh;
+      }
+      .backlog_idea_person_team {
+        color: rgb(230, 207, 207);
+        font-size: 14px;
+        height: 3vh;
+        line-height: 3vh;
+      }
+    }
+  }
+  .backlog_idea_person_text {
+    width: 75vw;
+    margin-left: 1vw;
+    // border: 0.1px solid #3f5564;
+    .dispose_idea,
+    .attachment,
+    .send_person,
+    .backlog_time {
+      display: flex;
+    }
+    .backlog_text {
+      width: 4vw;
+      color: rgb(230, 207, 207);
+    }
+    .backlog_value {
+      width: 65vw;
+      color: #fff;
+      text-align: left;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/closeLoopDispose/components/backlogDetailPicture.vue b/src/views/closeLoopDispose/components/backlogDetailPicture.vue
new file mode 100644
index 0000000..d00eae4
--- /dev/null
+++ b/src/views/closeLoopDispose/components/backlogDetailPicture.vue
@@ -0,0 +1,130 @@
+<template>
+  <!-- 我的流程流程图 -->
+  <div class="picture_body">
+    <!-- 流程图示例 -->
+    <div class="picture_title">
+      <div class="picture_area">
+        <div class="picture_icon_one"></div>
+        <div class="picture_text_one">已经过的节点</div>
+      </div>
+      <div class="picture_area">
+        <div class="picture_icon_two"></div>
+        <div class="picture_text_two">未经过的节点</div>
+      </div>
+      <div class="picture_area">
+        <div class="picture_icon_three"></div>
+        <div class="picture_text_three">当前节点</div>
+      </div>
+      <div class="picture_area">
+        <div class="picture_icon_four"></div>
+        <div class="picture_text_four">已经过的出口</div>
+      </div>
+      <div class="picture_area">
+        <div class="picture_icon_five"></div>
+        <div class="picture_text_five">未经过的出口</div>
+      </div>
+    </div>
+  </div>
+</template>
+  <script>
+export default {
+  name: "BacklogDetailPicture",
+  data() {
+    return {};
+  },
+};
+</script>
+  <style lang="less" scoped>
+.picture_body {
+  width: 95.9vw;
+  height: 70vh;
+  //   border: 0.1px solid #3f5564;
+  background: url("~@/assets/companyFile/09091.png") no-repeat !important;
+  background-size: 100% 100% !important;
+  .picture_title {
+    width: 94vw;
+    height: 6vh;
+    margin-left: 1vw;
+    border-bottom: 0.1px solid #3f5564;
+    display: flex;
+    .picture_area {
+      width: 8vw;
+      height: 4vh;
+      margin-top: 1vh;
+      margin-left: 1vw;
+      //   border: 0.1px solid #3f5564;
+      display: flex;
+      .picture_icon_one {
+        width: 18px;
+        height: 18px;
+        // border: 0.1px solid #fff;
+        border-radius: 50%;
+        background: #41ffc4;
+        margin-top: 0.9vh;
+      }
+      .picture_text_one {
+        color: #fff;
+        margin-left: 1vw;
+        height: 4vh;
+        line-height: 4vh;
+      }
+      .picture_icon_two {
+        width: 18px;
+        height: 18px;
+        // border: 0.1px solid #fff;
+        border-radius: 50%;
+        background: #c8c8c8;
+        margin-top: 0.9vh;
+      }
+      .picture_text_two {
+        color: #fff;
+        margin-left: 1vw;
+        height: 4vh;
+        line-height: 4vh;
+      }
+      .picture_icon_three {
+        width: 18px;
+        height: 18px;
+        // border: 0.1px solid #fff;
+        border-radius: 50%;
+        background: #2fe7ff;
+        margin-top: 0.9vh;
+      }
+      .picture_text_three {
+        color: #fff;
+        margin-left: 1vw;
+        height: 4vh;
+        line-height: 4vh;
+      }
+      .picture_icon_four {
+        width: 18px;
+        height: 18px;
+        // border: 0.1px solid #fff;
+        background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
+        background-size: 100% 100% !important;
+        margin-top: 0.9vh;
+      }
+      .picture_text_four {
+        color: #fff;
+        margin-left: 1vw;
+        height: 4vh;
+        line-height: 4vh;
+      }
+      .picture_icon_five {
+        width: 18px;
+        height: 18px;
+        // border: 0.1px solid #fff;
+        background: url("~@/assets/companyFile/rightarrow02.png") no-repeat !important;
+        background-size: 100% 100% !important;
+        margin-top: 0.9vh;
+      }
+      .picture_text_five {
+        color: #fff;
+        margin-left: 1vw;
+        height: 4vh;
+        line-height: 4vh;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/closeLoopDispose/components/backlogDetailRecords.vue b/src/views/closeLoopDispose/components/backlogDetailRecords.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/closeLoopDispose/components/myCourse.vue b/src/views/closeLoopDispose/components/myCourse.vue
index deeb2dd..47f3f18 100644
--- a/src/views/closeLoopDispose/components/myCourse.vue
+++ b/src/views/closeLoopDispose/components/myCourse.vue
@@ -79,7 +79,6 @@
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :page-sizes="[5, 10]"
-            :pager-count="5"
             :page-size="pageSize"
             :current-page="pageNum"
             layout="total, sizes, prev, pager, next, jumper"
@@ -177,8 +176,7 @@ export default {
       get_my_course(param).then((res) => {
         console.log("get_data", res);
         this.table_data = res.rows;
-        // this.total = res.total;
-        this.total = 100;
+        this.total = res.total;
       });
     },
     // 重置查询
@@ -191,7 +189,7 @@ export default {
     },
     // 详情点击跳转
     check_details(val) {
-      console.log(val);
+      console.log('12344',val);
       this.$emit("change_to_detail", val); // 通知跳转
     },
     // 转换时间格式
diff --git a/src/views/closeLoopDispose/components/myCourseDetailForm.vue b/src/views/closeLoopDispose/components/myCourseDetailForm.vue
index fccc8b2..732f252 100644
--- a/src/views/closeLoopDispose/components/myCourseDetailForm.vue
+++ b/src/views/closeLoopDispose/components/myCourseDetailForm.vue
@@ -13,11 +13,17 @@
         <!-- 此列为数据展示 -->
         <div class="basic_message_value_one">
           <div class="basic_message_value">
-            {{ this.send_detail.procDefName }}
+            {{ this.basic_message.processName }}
+          </div>
+          <div class="basic_message_value">
+            {{ this.basic_message.processType }}
+          </div>
+          <div class="basic_message_value">
+            {{ this.basic_message.alarmTime }}
+          </div>
+          <div class="basic_message_value">
+            {{ this.basic_message.alarmLevel }}
           </div>
-          <div class="basic_message_value">防疫安全</div>
-          <div class="basic_message_value">{{ this.send_detail.createTime }}</div>
-          <div class="basic_message_value">二级</div>
         </div>
         <div class="basic_message_text_two">
           <div class="basic_message_text">企业名称:</div>
@@ -26,9 +32,13 @@
         </div>
         <!-- 此列为数据展示 -->
         <div class="basic_message_value_two">
-          <div class="basic_message_value_tag">宁波市北越石化有限公司</div>
-          <div class="basic_message_value">进行中</div>
-          <div class="basic_message_value">核算检测率</div>
+          <div class="basic_message_value_tag">
+            {{ this.basic_message.companyName }}
+          </div>
+          <div class="basic_message_value"></div>
+          <div class="basic_message_value">
+            {{ this.basic_message.alarmName }}
+          </div>
         </div>
       </div>
     </div>
@@ -81,14 +91,16 @@
   </div>
 </template>
 <script>
+import { get_my_course_record } from "@/api/closeLoopDispose";
 export default {
   name: "MyCourseDetailForm",
-  props:{
-    send_detail:{}
+  props: {
+    send_detail: {},
   },
   data() {
     return {
       attachment_show: true, // 附件 按需显示或者隐藏
+      basic_message: {},
       course_list: [
         {
           id: "1",
@@ -132,9 +144,18 @@ export default {
     };
   },
   created() {
-    console.log('send_detail',this.send_detail); // -> 从myCourse传过来的单条表格详情数据
+    console.log("send_detail11", this.send_detail); // -> 从myCourse传过来的单条表格详情数据
+    let param = {
+      definitionId: this.send_detail.procDefId,
+      deployId: this.send_detail.deployId,
+      procInsId: this.send_detail.procInsId,
+      taskId: this.send_detail.taskId,
+    };
+    get_my_course_record(param).then((res) => {
+      this.basic_message = res.data;
+    });
   },
-  methods:{},
+  methods: {},
 };
 </script>
 <style lang="less" scoped>
diff --git a/src/views/closeLoopDispose/components/myCourseDetailRecords.vue b/src/views/closeLoopDispose/components/myCourseDetailRecords.vue
index 071b677..ab284ba 100644
--- a/src/views/closeLoopDispose/components/myCourseDetailRecords.vue
+++ b/src/views/closeLoopDispose/components/myCourseDetailRecords.vue
@@ -15,43 +15,47 @@
         </div>
         <div class="step_table">
           <div class="step_table_top">
-            <div class="step_table_top_name">{{ item.name }}</div>
+            <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.opeartion_num }}</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.have_opeartion_num }}
+                  {{ item.finishTotal }}
                 </div>
               </div>
               <div class="opeartion_num">
                 <div class="opeartion_num_text">未操作:</div>
                 <div class="not_opeartion_num_val">
-                  {{ item.not_opeartion_num }}
+                  {{ item.todoTotal }}
                 </div>
               </div>
             </div>
           </div>
           <el-table
             height="250"
-            :data="item.table_list"
+            :data="item.historyTaskList"
             :header-cell-style="table_header"
             :cell-style="{ background: 'revert', 'text-align': 'center' }"
           >
-            <el-table-column prop="change" label="实际办理" width="280">
+            <el-table-column prop="assigneeName" label="实际办理" width="280">
             </el-table-column>
-            <el-table-column prop="under_change" label="候选办理" width="280">
+            <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="load_time" label="接收时间" width="280">
+            <el-table-column prop="finishTime" label="接收时间" width="280">
             </el-table-column>
-            <el-table-column prop="time" label="操作时间" width="280">
+            <el-table-column
+              prop="createTime"
+              label="操作时间"
+              width="280"
+            >
             </el-table-column>
-            <el-table-column prop="use_time" label="耗时"> </el-table-column>
+            <el-table-column prop="duration" label="耗时"> </el-table-column>
           </el-table>
         </div>
       </div>
@@ -95,6 +99,7 @@ export default {
       ],
       src: require("../../../assets/companyFile/loadtrue.png"),
       icon_show: true, // 控制图标显示隐藏
+      step_line_show: true,
     };
   },
   created() {
@@ -106,8 +111,17 @@ export default {
       taskId: this.send_detail.taskId,
     };
     get_my_course_record(param).then((res) => {
-      this.record_list = res.data.wfDetailVo.historyTaskList
-      console.log('this.record_list',this.record_list);
+      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: {
@@ -199,6 +213,8 @@ export default {
         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);
       }
@@ -212,7 +228,7 @@ export default {
           height: 5vh;
           display: flex;
           .opeartion_num_text {
-            width: 5vw;
+            width: 4vw;
             height: 5vh;
             color: #fff;
             font-size: 16px;
@@ -220,7 +236,7 @@ export default {
             text-align: center;
           }
           .opeartion_num_val {
-            width: 2vw;
+            width: 3vw;
             height: 5vh;
             color: #fff;
             font-size: 16px;
@@ -228,7 +244,7 @@ export default {
             text-align: center;
           }
           .not_opeartion_num_val {
-            width: 2vw;
+            width: 3vw;
             height: 5vh;
             color: #e75c5d;
             font-size: 16px;
diff --git a/src/views/closeLoopDispose/index.vue b/src/views/closeLoopDispose/index.vue
index d23dddd..9950782 100644
--- a/src/views/closeLoopDispose/index.vue
+++ b/src/views/closeLoopDispose/index.vue
@@ -9,41 +9,58 @@
         <el-breadcrumb-item @click.native="back_home_page"
           >闭环处置</el-breadcrumb-item
         >
-        <el-breadcrumb-item v-if="is_flag === '1'">处置详情</el-breadcrumb-item>
+        <el-breadcrumb-item v-if="is_flag != '0'">处置详情</el-breadcrumb-item>
       </el-breadcrumb>
     </div>
-    <el-tabs v-show="is_flag === '0'" v-model="activeName">
+    <el-tabs v-if="is_flag === '0'" v-model="activeName">
       <el-tab-pane label="我的流程" name="first">
         <MyCourse
           ref="myCourse"
           @change_to_detail="change_to_detail"
         ></MyCourse>
       </el-tab-pane>
-      <el-tab-pane label="代办任务(7)" name="second">代办任务</el-tab-pane>
+      <el-tab-pane label="代办任务" name="second">
+        <Backlog
+          ref="backlog"
+          @change_backlog_detail="change_backlog_detail"
+        ></Backlog>
+      </el-tab-pane>
       <el-tab-pane label="已办任务" name="third">已办任务</el-tab-pane>
       <el-tab-pane label="抄送我的" name="fourth">抄送我的</el-tab-pane>
     </el-tabs>
+    <!-- 我的流程详情tab页 -->
     <MyCourseDetail
       :send_detail="send_detail"
       ref="myCourseDetail"
-      v-show="is_flag === '1'"
+      v-else-if="is_flag === '1'"
     ></MyCourseDetail>
+    <!-- 待办流程详情tab页 -->
+    <BacklogDetail
+     :backlog_detail="backlog_detail"
+      ref="backlogDetail"
+      v-else-if="is_flag === '2'"
+    ></BacklogDetail>
   </el-card>
 </template>
 <script>
 import MyCourse from "./components/myCourse";
 import MyCourseDetail from "./components/myCourseDetail";
+import Backlog from "./components/backlog";
+import BacklogDetail from "./components/backlogDetail";
 export default {
   name: "CloseLoopDispose",
   components: {
     MyCourse,
     MyCourseDetail,
+    Backlog,
+    BacklogDetail,
   },
   data() {
     return {
       activeName: "first",
       is_flag: "0", // 面包屑显示 tab对应详情页显示
       send_detail: {},
+      backlog_detail: {},
     };
   },
   methods: {
@@ -52,6 +69,10 @@ export default {
       this.is_flag = "1";
       this.send_detail = val; // -> 传到myCourseDetailForm里面的单条详情数据
     },
+    change_backlog_detail(val) {
+      this.is_flag = "2";
+      this.backlog_detail = val;
+    },
     // 点击回归首页
     back_home_page() {
       this.is_flag = "0";