From edd3dda6fd540a2531aff31fe67e45ae1aee686f Mon Sep 17 00:00:00 2001
From: lukeyan <1727408482@qq.com>
Date: Wed, 21 Jun 2023 11:29:08 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=AD=E7=8E=AF=E5=B7=B2=E5=8A=9E=EF=BC=8C?=
 =?UTF-8?q?=E6=8A=84=E9=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../closeLoopDispose/components/complete.vue  | 433 ++++++++++++++++++
 .../components/completeDetail.vue             |  80 ++++
 .../components/completeDetailForm.vue         | 360 +++++++++++++++
 .../components/completeDetailPicture.vue      | 130 ++++++
 .../components/completeDetailRecords.vue      | 304 ++++++++++++
 .../closeLoopDispose/components/copy.vue      | 432 +++++++++++++++++
 .../components/myCourseDetailForm.vue         |  12 +-
 src/views/closeLoopDispose/index.vue          |  37 +-
 8 files changed, 1783 insertions(+), 5 deletions(-)
 create mode 100644 src/views/closeLoopDispose/components/complete.vue
 create mode 100644 src/views/closeLoopDispose/components/completeDetail.vue
 create mode 100644 src/views/closeLoopDispose/components/completeDetailForm.vue
 create mode 100644 src/views/closeLoopDispose/components/completeDetailPicture.vue
 create mode 100644 src/views/closeLoopDispose/components/completeDetailRecords.vue
 create mode 100644 src/views/closeLoopDispose/components/copy.vue

diff --git a/src/views/closeLoopDispose/components/complete.vue b/src/views/closeLoopDispose/components/complete.vue
new file mode 100644
index 0000000..c76ab5a
--- /dev/null
+++ b/src/views/closeLoopDispose/components/complete.vue
@@ -0,0 +1,433 @@
+<template>
+  <!-- 已办任务 -->
+  <div>
+    <div class="complete_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-select
+              v-model="search.complete_status"
+              @change="change_complete"
+            >
+              <el-option
+                v-for="item in complete_list"
+                :key="item.value"
+                :label="item.label"
+                :value="item.label"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="创建时间">
+            <el-date-picker
+              v-model="search.complete_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="240">
+          </el-table-column>
+          <el-table-column prop="course_type" label="流程类型" width="200">
+          </el-table-column>
+          <el-table-column prop="build_person" label="创建者" width="200">
+          </el-table-column>
+          <el-table-column prop="build_unit" label="创建单位" width="200">
+          </el-table-column>
+          <el-table-column prop="course_status" label="流程状态" width="200">
+            <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="当前节点">
+          </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: "Complete",
+  data() {
+    return {
+      search: {
+        complete_status: "",
+        procStatus: "0", // 表格查询待定入参
+        complete_time: [this.get_today(), this.get_tomorrow()],
+        word: "",
+      },
+      complete_list: [
+        { label: "待审核", value: "1" },
+        { label: "通过", value: "2" },
+        { label: "驳回", value: "3" },
+        { label: "处置中", value: "4" },
+      ],
+      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: {
+    change_complete(val) {
+      this.search.procStatus = this.complete_list.find(
+        (item) => item.label === val
+      ).value;
+    },
+    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,
+        procStatus: this.search.procStatus,
+      };
+      console.log(param);
+    },
+    reset() {
+      this.search.procStatus = "0";
+      this.search.complete_status = "";
+      this.search.complete_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_complete_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);
+}
+.complete_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/completeDetail.vue b/src/views/closeLoopDispose/components/completeDetail.vue
new file mode 100644
index 0000000..ebcee2a
--- /dev/null
+++ b/src/views/closeLoopDispose/components/completeDetail.vue
@@ -0,0 +1,80 @@
+<template>
+  <!-- 我的流程详情 -->
+  <div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="表单信息" name="first">
+        <CompleteDetailForm :complete_detail="complete_detail" ref="completeDetailForm"></CompleteDetailForm>
+      </el-tab-pane>
+      <el-tab-pane label="流程图" name="second">
+        
+      </el-tab-pane>
+      <el-tab-pane label="流转记录" name="third">
+        
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script>
+import CompleteDetailForm from "./completeDetailForm"
+export default {
+  name: "CompleteDetail",
+  components:{
+    CompleteDetailForm,
+  },
+  props:{
+    complete_detail:{}, // -> 从complete传过来的单条表格详情数据
+  },
+  data() {
+    return {
+      activeName: "first",
+    };
+  },
+  methods:{},
+};
+</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/completeDetailForm.vue b/src/views/closeLoopDispose/components/completeDetailForm.vue
new file mode 100644
index 0000000..15d18c0
--- /dev/null
+++ b/src/views/closeLoopDispose/components/completeDetailForm.vue
@@ -0,0 +1,360 @@
+<template>
+  <!-- 处置详情的表单信息 -->
+  <div>
+    <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">
+            {{ this.basic_message.alarmLevel }}
+          </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">
+            {{ this.process_status }}
+          </div>
+          <div class="basic_message_value">
+            {{ this.basic_message.alarmName }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="complete_idea">
+      <div class="complete_idea_title">流转意见</div>
+      <div class="complete_idea_body">
+        <!-- 遍历展示人员信息 -->
+        <div
+          v-for="item in complete_list"
+          :key="item.id"
+          class="complete_idea_person"
+        >
+          <div class="complete_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="complete_idea_person_information">
+              <div class="complete_idea_person_name">{{ item.name }}</div>
+              <div class="complete_idea_person_team">{{ item.team }}</div>
+            </div>
+          </div>
+          <div class="complete_idea_person_text">
+            <!-- 第一行，处理意见 -->
+            <div class="dispose_idea">
+              <div class="complete_text">处理意见:</div>
+              <div class="complete_value">{{ item.complete_value }}</div>
+            </div>
+            <!-- 第二行，附件 按需显示或者隐藏 -->
+            <div v-if="attachment_show" class="attachment">
+              <div class="complete_text">附件:</div>
+              <!-- 此处后面会改为下载图片链接 -->
+              <div class="complete_value">{{ item.attachment_value }}</div>
+            </div>
+            <!-- 第三行，抄送人 -->
+            <div class="complete_person">
+              <div class="complete_text">抄送人:</div>
+              <div class="complete_value">{{ item.complete_person }}</div>
+            </div>
+            <!-- 第四行，时间 -->
+            <div class="complete_time">
+              <div class="complete_text">时间:</div>
+              <div class="complete_value">{{ item.complete_time }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import { get_my_complete_record } from "@/api/closeLoopDispose";
+export default {
+  name: "CompleteDetailForm",
+  props: {
+    complete_detail: {},
+  },
+  data() {
+    return {
+      attachment_show: true, // 附件 按需显示或者隐藏
+      basic_message: {},
+      complete_list: [
+        {
+          id: "1",
+          personUrl: "../../../assets/companyFile/avatar.png",
+          name: "吴沁",
+          team: "技侦大队",
+          complete_value:
+            "2022年8月20日0时32分,我队接到预警称浙江浙江鑫甬生物化工股份有限公司存在运输车辆频繁违章情况。接报后值班民警于立即到达现场,经现场了解到:危化品运输车(浙B2M50R)为外来租赁货车,司机王某(身份证号:42109119880717****)疑似前科重点人员。目前司机已经带回所以便进一步调查。2022年8月20日0时32分,我队接到预警称浙江浙江鑫甬生物化工股份有限公司存在运输车辆频繁违章情况。接报后值班民警于立即到达现场,经现场了解到:危化品运输车(浙B2M50R)为外来租赁货车,司机王某(身份证号:42109119880717****)疑似前科重点人员。目前司机已经带回所以便进一步调查。",
+          attachment_value: "20220820现场处置照片.jpg",
+          complete_person: "蔡坤、黄毅、李丹丹、张强强",
+          complete_time: "2022-11-13  12:10:08",
+        },
+        {
+          id: "2",
+          personUrl: "../../../assets/companyFile/avatar.png",
+          name: "吴沁",
+          team: "技侦大队",
+          complete_value:
+            "2022年8月26日12时许,经过分析,我队决定对浙江浙江鑫甬生物化工股份有限公司的外来租赁危化品运输车(浙B2M50R)司机王某(身份证号:42109119880717****）做出吊销货车驾照处罚，立即执行。",
+        },
+        {
+          id: "3",
+          personUrl: "../../../assets/companyFile/avatar.png",
+          name: "吴沁",
+          team: "技侦大队",
+          complete_value:
+            "2022年8月26日12时许,经过分析,我队决定对浙江浙江鑫甬生物化工股份有限公司的外来租赁危化品运输车(浙B2M50R)司机王某(身份证号:42109119880717****）做出吊销货车驾照处罚，立即执行。",
+        },
+        {
+          id: "4",
+          personUrl: "../../../assets/companyFile/avatar.png",
+          name: "吴沁",
+          team: "技侦大队",
+          complete_value:
+            "2022年8月20日0时32分,我队接到预警称浙江浙江鑫甬生物化工股份有限公司存在运输车辆频繁违章情况。接报后值班民警于立即到达现场,经现场了解到:危化品运输车(浙B2M50R)为外来租赁货车,司机王某(身份证号:42109119880717****)疑似前科重点人员。目前司机已经带回所以便进一步调查。2022年8月20日0时32分,我队接到预警称浙江浙江鑫甬生物化工股份有限公司存在运输车辆频繁违章情况。接报后值班民警于立即到达现场,经现场了解到:危化品运输车(浙B2M50R)为外来租赁货车,司机王某(身份证号:42109119880717****)疑似前科重点人员。目前司机已经带回所以便进一步调查。",
+          attachment_value: "20220820现场处置照片.jpg",
+          complete_person: "蔡坤、黄毅、李丹丹、张强强",
+          complete_time: "2022-11-13  12:10:08",
+        },
+      ],
+      status_list: [
+        { label: "待审核", value: "1" },
+        { label: "通过", value: "2" },
+        { label: "驳回", value: "3" },
+        { label: "处置中", value: "4" },
+      ],
+      process_status:'', // 流程状态展示
+    };
+  },
+  created() {
+    console.log("complete_detail11", this.complete_detail); // -> 从myCourse传过来的单条表格详情数据
+    let param = {
+      definitionId: this.complete_detail.procDefId,
+      deployId: this.complete_detail.deployId,
+      procInsId: this.complete_detail.procInsId,
+      taskId: this.complete_detail.taskId,
+    };
+    // get_my_complete_record(param).then((res) => {
+    //   this.basic_message = res.data;
+    //   this.process_status = this.status_list.find(item=>item.value === this.basic_message.alarmStatus).label
+    // });
+    console.log(param);
+  },
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.basic_message {
+  width: 95.9vw;
+  height: 22vh;
+  border: 0.1px solid #3f5564;
+  //   background: url("~@/assets/companyFile/complete_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;
+      }
+    }
+  }
+}
+.complete_idea {
+  width: 95.9vw;
+  height: 47vh;
+  margin-top: 2vh;
+  border: 0.1px solid #3f5564;
+  .complete_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;
+  }
+}
+.complete_idea_body {
+  width: 95.9vw;
+  height: 42vh;
+  overflow-y: scroll;
+}
+.complete_idea_body::-webkit-scrollbar {
+  display: none;
+  width: 6px;
+  background-color: #5e666a;
+  border-radius: 4px;
+}
+
+.complete_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%;
+}
+/* 个人信息不固定高度，给个人信息自由展示空间 */
+.complete_idea_person {
+  width: 94vw;
+  border: 0.1px solid #3f5564;
+  background: rgba(209, 199, 199, 0.1);
+  margin-top: 1vh;
+  margin-left: 1vw;
+  display: flex;
+  .complete_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;
+      }
+    }
+    .complete_idea_person_information {
+      margin-left: 1vw;
+      display: flex;
+      flex-direction: column;
+      .complete_idea_person_name {
+        // color: rgb(230, 207, 207);
+        color: #fff;
+        font-weight: 600;
+        height: 3vh;
+        line-height: 3vh;
+      }
+      .complete_idea_person_team {
+        color: rgb(230, 207, 207);
+        font-size: 14px;
+        height: 3vh;
+        line-height: 3vh;
+      }
+    }
+  }
+  .complete_idea_person_text {
+    width: 75vw;
+    margin-left: 1vw;
+    // border: 0.1px solid #3f5564;
+    .dispose_idea,
+    .attachment,
+    .complete_person,
+    .complete_time {
+      display: flex;
+    }
+    .complete_text {
+      width: 4vw;
+      color: rgb(230, 207, 207);
+    }
+    .complete_value {
+      width: 65vw;
+      color: #fff;
+      text-align: left;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/closeLoopDispose/components/completeDetailPicture.vue b/src/views/closeLoopDispose/components/completeDetailPicture.vue
new file mode 100644
index 0000000..59fced5
--- /dev/null
+++ b/src/views/closeLoopDispose/components/completeDetailPicture.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: "CompleteDetailPicture",
+  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/completeDetailRecords.vue b/src/views/closeLoopDispose/components/completeDetailRecords.vue
new file mode 100644
index 0000000..b5ab65f
--- /dev/null
+++ b/src/views/closeLoopDispose/components/completeDetailRecords.vue
@@ -0,0 +1,304 @@
+<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: "CompleteDetailRecords",
+  props: {
+    complete_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("complete_detail2", this.complete_detail);
+    let param = {
+      definitionId: this.complete_detail.procDefId,
+      deployId: this.complete_detail.deployId,
+      procInsId: this.complete_detail.procInsId,
+      taskId: this.complete_detail.taskId,
+    };
+    console.log(param);
+    // 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
diff --git a/src/views/closeLoopDispose/components/copy.vue b/src/views/closeLoopDispose/components/copy.vue
new file mode 100644
index 0000000..d61d270
--- /dev/null
+++ b/src/views/closeLoopDispose/components/copy.vue
@@ -0,0 +1,432 @@
+<template>
+  <!-- 抄送我的 -->
+  <div>
+    <div class="copy_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-select
+              v-model="search.copy_status"
+              @change="change_complete"
+            >
+              <el-option
+                v-for="item in copy_list"
+                :key="item.value"
+                :label="item.label"
+                :value="item.label"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="创建时间">
+            <el-date-picker
+              v-model="search.copy_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="240">
+          </el-table-column>
+          <el-table-column prop="course_type" label="流程类型" width="200">
+          </el-table-column>
+          <el-table-column prop="build_person" label="创建者" width="200">
+          </el-table-column>
+          <el-table-column prop="build_unit" label="创建单位" width="200">
+          </el-table-column>
+          <el-table-column prop="course_status" label="流程状态" width="200">
+            <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="当前节点"> </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: "Complete",
+  data() {
+    return {
+      search: {
+        copy_status: "",
+        procStatus: "0", // 表格查询待定入参
+        copy_time: [this.get_today(), this.get_tomorrow()],
+        word: "",
+      },
+      copy_list: [
+        { label: "待审核", value: "1" },
+        { label: "通过", value: "2" },
+        { label: "驳回", value: "3" },
+        { label: "处置中", value: "4" },
+      ],
+      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: {
+    change_copy(val) {
+      this.search.procStatus = this.copy_list.find(
+        (item) => item.label === val
+      ).value;
+    },
+    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,
+        procStatus: this.search.procStatus,
+      };
+      console.log(param);
+    },
+    reset() {
+      this.search.procStatus = "0";
+      this.search.copy_status = "";
+      this.search.copy_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_copy_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);
+}
+.copy_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/myCourseDetailForm.vue b/src/views/closeLoopDispose/components/myCourseDetailForm.vue
index 732f252..88a4d16 100644
--- a/src/views/closeLoopDispose/components/myCourseDetailForm.vue
+++ b/src/views/closeLoopDispose/components/myCourseDetailForm.vue
@@ -35,7 +35,9 @@
           <div class="basic_message_value_tag">
             {{ this.basic_message.companyName }}
           </div>
-          <div class="basic_message_value"></div>
+          <div class="basic_message_value">
+            {{ this.process_status }}
+          </div>
           <div class="basic_message_value">
             {{ this.basic_message.alarmName }}
           </div>
@@ -141,6 +143,13 @@ export default {
           course_time: "2022-11-13  12:10:08",
         },
       ],
+      status_list: [
+        { label: "待审核", value: "1" },
+        { label: "通过", value: "2" },
+        { label: "驳回", value: "3" },
+        { label: "处置中", value: "4" },
+      ],
+      process_status:'', // 流程状态展示
     };
   },
   created() {
@@ -153,6 +162,7 @@ export default {
     };
     get_my_course_record(param).then((res) => {
       this.basic_message = res.data;
+      this.process_status = this.status_list.find(item=>item.value === this.basic_message.alarmStatus).label
     });
   },
   methods: {},
diff --git a/src/views/closeLoopDispose/index.vue b/src/views/closeLoopDispose/index.vue
index 9950782..895755d 100644
--- a/src/views/closeLoopDispose/index.vue
+++ b/src/views/closeLoopDispose/index.vue
@@ -25,8 +25,15 @@
           @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-tab-pane label="已办任务" name="third">
+        <Complete
+          ref="complete"
+          @change_complete_detail="change_complete_detail"
+        ></Complete>
+      </el-tab-pane>
+      <el-tab-pane label="抄送我的" name="fourth">
+        <Copy ref="copy" @change_copy_detail="change_copy_detail"></Copy>
+      </el-tab-pane>
     </el-tabs>
     <!-- 我的流程详情tab页 -->
     <MyCourseDetail
@@ -36,10 +43,16 @@
     ></MyCourseDetail>
     <!-- 待办流程详情tab页 -->
     <BacklogDetail
-     :backlog_detail="backlog_detail"
+      :backlog_detail="backlog_detail"
       ref="backlogDetail"
       v-else-if="is_flag === '2'"
     ></BacklogDetail>
+    <!-- 已办流程详情tab页 -->
+    <CompleteDetail
+      :complete_detail="complete_detail"
+      ref="completeDetail"
+      v-else-if="is_flag === '3'"
+    ></CompleteDetail>
   </el-card>
 </template>
 <script>
@@ -47,6 +60,9 @@ import MyCourse from "./components/myCourse";
 import MyCourseDetail from "./components/myCourseDetail";
 import Backlog from "./components/backlog";
 import BacklogDetail from "./components/backlogDetail";
+import Complete from "./components/complete";
+import CompleteDetail from "./components/completeDetail";
+import Copy from './components/copy'
 export default {
   name: "CloseLoopDispose",
   components: {
@@ -54,6 +70,9 @@ export default {
     MyCourseDetail,
     Backlog,
     BacklogDetail,
+    Complete,
+    CompleteDetail,
+    Copy,
   },
   data() {
     return {
@@ -61,6 +80,8 @@ export default {
       is_flag: "0", // 面包屑显示 tab对应详情页显示
       send_detail: {},
       backlog_detail: {},
+      complete_detail: {},
+      copy_detail:{},
     };
   },
   methods: {
@@ -71,7 +92,15 @@ export default {
     },
     change_backlog_detail(val) {
       this.is_flag = "2";
-      this.backlog_detail = val;
+      this.backlog_detail = val; // -> 传到backlogDetailForm里面的单条详情数据
+    },
+    change_complete_detail(val) {
+      this.is_flag = "3";
+      this.complete_detail = val; // -> 传到completeDetailForm里面的单条详情数据
+    },
+    change_copy_detail(val) {
+      this.is_flag = '4'
+      this.copy_detail = val // -> 传到copyDetailForm里面的单条详情数据
     },
     // 点击回归首页
     back_home_page() {