From 0becbd5a584b0980aa76c1e7565722871d3e8601 Mon Sep 17 00:00:00 2001
From: lukeyan <1727408482@qq.com>
Date: Wed, 23 Aug 2023 21:24:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=81=E7=A8=8B=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/backlogDetail.vue              |   8 +-
 .../components/backlogDetailPicture.vue       | 270 ++++++++++++++++++
 .../components/completeDetail.vue             |   8 +-
 .../components/completeDetailPicture.vue      | 270 ++++++++++++++++++
 .../components/copyDetail.vue                 |   8 +-
 .../components/copyDetailPicture.vue          | 270 ++++++++++++++++++
 .../components/myCourseDetail.vue             |   8 +-
 .../components/myCourseDetailPicture.vue      | 270 ++++++++++++++++++
 8 files changed, 1096 insertions(+), 16 deletions(-)

diff --git a/src/views/closeLoopDispose/components/backlogDetail.vue b/src/views/closeLoopDispose/components/backlogDetail.vue
index 159f07c..629bfeb 100644
--- a/src/views/closeLoopDispose/components/backlogDetail.vue
+++ b/src/views/closeLoopDispose/components/backlogDetail.vue
@@ -9,9 +9,9 @@
           @back_home_page="back_home_page"
         ></BacklogDetailForm>
       </el-tab-pane>
-      <!-- <el-tab-pane label="流程图" name="second">
+      <el-tab-pane label="流程图" name="second">
         <BacklogDetailPicture ref="backlogDetailPicture"></BacklogDetailPicture>
-      </el-tab-pane> -->
+      </el-tab-pane>
       <el-tab-pane label="流转记录" name="third">
         <BacklogDetailRecords
           ref="backlogDetailRecords"
@@ -23,13 +23,13 @@
 </template>
 <script>
 import BacklogDetailForm from "./backlogDetailForm";
-// import BacklogDetailPicture from "./backlogDetailPicture";
+import BacklogDetailPicture from "./backlogDetailPicture";
 import BacklogDetailRecords from "./backlogDetailRecords";
 export default {
   name: "BacklogDetail",
   components: {
     BacklogDetailForm,
-    // BacklogDetailPicture,
+    BacklogDetailPicture,
     BacklogDetailRecords,
   },
   props: {
diff --git a/src/views/closeLoopDispose/components/backlogDetailPicture.vue b/src/views/closeLoopDispose/components/backlogDetailPicture.vue
index d00eae4..6bc6ea1 100644
--- a/src/views/closeLoopDispose/components/backlogDetailPicture.vue
+++ b/src/views/closeLoopDispose/components/backlogDetailPicture.vue
@@ -24,6 +24,57 @@
         <div class="picture_text_five">未经过的出口</div>
       </div>
     </div>
+    <div class="picture_item">
+      <div class="start_point">
+        <div class="start_point_item">
+          <div class="start_point_item_text">1.转处置任务治安大队</div>
+        </div>
+      </div>
+      <div class="line_one">
+        <div class="line_item"></div>
+      </div>
+      <div class="line_two">
+        <div class="line_item_one"></div>
+        <div class="line_item_two"></div>
+      </div>
+      <!-- 箭头 -->
+      <div class="arrow_one">
+        <div class="arrow_item_one"></div>
+        <div class="arrow_item_two"></div>
+        <div class="arrow_item_three"></div>
+      </div>
+      <!-- 流程点 -->
+      <div class="next_point">
+        <div class="next_point_item_one">
+          <div class="next_point_item_one_text">1.转处置任务治安大队</div>
+        </div>
+        <div class="next_point_item_two">
+          <div class="next_point_item_two_text">1.转处置任务治安大队</div>
+        </div>
+        <div class="next_point_item_three">
+          <div class="next_point_item_three_text">1.转处置任务治安大队</div>
+        </div>
+      </div>
+      <!-- 流程线 -->
+      <div class="line_three">
+        <div class="line_item_one"></div>
+        <div class="line_item_two"></div>
+      </div>
+      <!-- 流程线 -->
+      <div class="line_four">
+        <div class="line_item"></div>
+      </div>
+      <!-- 箭头 -->
+      <div class="arrow_two">
+        <div class="arrow_item"></div>
+      </div>
+      <!-- 流程终结点 -->
+      <div class="end_point">
+        <div class="end_point_item">
+          <div class="end_point_item_text">1.转处置任务治安大队</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
   <script>
@@ -126,5 +177,224 @@ export default {
       }
     }
   }
+  .picture_item {
+    width: 94vw;
+    height: 60vh;
+    margin-left: 1vw;
+    margin-top: 1vh;
+    display: flex;
+    .start_point {
+      width: 15vw;
+      height: 60vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .start_point_item {
+        width: 15vw;
+        height: 10vh;
+        // margin-top: 18vh;
+        background: url("~@/assets/companyFile/point01.png") no-repeat !important;
+        background-size: 100% 100% !important;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .start_point_item_text {
+        width: 15vw;
+        height: 5vh;
+        color: #c8c8c8;
+        text-align: center;
+        line-height: 5vh;
+      }
+    }
+    .line_one {
+      width: 10vw;
+      height: 60vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .line_item {
+        width: 10vw;
+        height: 2px;
+        background: #278961;
+      }
+    }
+    .line_two {
+      width: 8vw;
+      height: 60vh;
+      display: flex;
+      flex-direction: column-reverse;
+      justify-content: center;
+      .line_item_one {
+        width: 8vw;
+        height: 15vh;
+        border-left: 2px solid #278961;
+        border-bottom: 2px solid #278961;
+        border-top: 1px solid #278961;
+      }
+      .line_item_two {
+        width: 8vw;
+        height: 15vh;
+        border-left: 2px solid #278961;
+        border-top: 2px solid #278961;
+        border-bottom: 1px solid #278961;
+      }
+    }
+    .arrow_one {
+      width: 1.5vw;
+      height: 60vh;
+      display: flex;
+      flex-direction: column;
+      .arrow_item_one {
+        width: 1.5vw;
+        height: 2vh;
+        margin-top: 14vh;
+        background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
+        background-size: 100% 100% !important;
+      }
+      .arrow_item_two {
+        width: 1.5vw;
+        height: 2vh;
+        margin-top: 13vh;
+        background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
+        background-size: 100% 100% !important;
+      }
+      .arrow_item_three {
+        width: 1.5vw;
+        height: 2vh;
+        margin-top: 13vh;
+        background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
+        background-size: 100% 100% !important;
+      }
+    }
+    .next_point {
+      width: 15vw;
+      height: 60vh;
+      display: flex;
+      flex-direction: column;
+      .next_point_item_one {
+        width: 15vw;
+        height: 10vh;
+        margin-top: 10vh;
+        background: url("~@/assets/companyFile/point01.png") no-repeat !important;
+        background-size: 100% 100% !important;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .next_point_item_one_text {
+          width: 15vw;
+          height: 5vh;
+          color: #c8c8c8;
+          text-align: center;
+          line-height: 5vh;
+        }
+      }
+      .next_point_item_two {
+        width: 15vw;
+        height: 10vh;
+        margin-top: 5vh;
+        background: url("~@/assets/companyFile/point02.png") no-repeat !important;
+        background-size: 100% 100% !important;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .next_point_item_two_text {
+          width: 15vw;
+          height: 5vh;
+          color: #c8c8c8;
+          text-align: center;
+          line-height: 5vh;
+        }
+      }
+      .next_point_item_three {
+        width: 15vw;
+        height: 10vh;
+        margin-top: 5vh;
+        background: url("~@/assets/companyFile/point03.png") no-repeat !important;
+        background-size: 100% 100% !important;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .next_point_item_three_text {
+          width: 15vw;
+          height: 5vh;
+          color: #c8c8c8;
+          text-align: center;
+          line-height: 5vh;
+        }
+      }
+    }
+    .line_three {
+      width: 8vw;
+      height: 60vh;
+      display: flex;
+      flex-direction: column-reverse;
+      justify-content: center;
+      .line_item_one {
+        width: 8vw;
+        height: 15vh;
+        border-right: 2px solid #747b7e;
+        border-bottom: 2px solid #747b7e;
+        border-top: 1px solid #747b7e;
+      }
+      .line_item_two {
+        width: 8vw;
+        height: 15vh;
+        border-right: 2px solid #747b7e;
+        border-top: 2px solid #747b7e;
+        border-bottom: 1px solid #747b7e;
+      }
+    }
+    .line_four {
+      width: 10vw;
+      height: 60vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .line_item {
+        width: 10vw;
+        height: 2px;
+        background: #747b7e;
+      }
+    }
+    .arrow_two {
+      width: 1.5vw;
+      height: 60vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .arrow_item {
+        width: 1.5vw;
+        height: 2vh;
+        // border: 0.1px solid #3f5564;
+        background: url("~@/assets/companyFile/rightarrow02.png") no-repeat !important;
+        background-size: 100% 100% !important;
+      }
+    }
+    .end_point {
+      width: 15vw;
+      height: 60vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .end_point_item {
+        width: 15vw;
+        height: 10vh;
+        // margin-top: 18vh;
+        background: url("~@/assets/companyFile/point03.png") no-repeat !important;
+        background-size: 100% 100% !important;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .end_point_item_text {
+          width: 15vw;
+          height: 5vh;
+          color: #c8c8c8;
+          text-align: center;
+          line-height: 5vh;
+        }
+      }
+    }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/closeLoopDispose/components/completeDetail.vue b/src/views/closeLoopDispose/components/completeDetail.vue
index 55ea3e6..c4ab411 100644
--- a/src/views/closeLoopDispose/components/completeDetail.vue
+++ b/src/views/closeLoopDispose/components/completeDetail.vue
@@ -8,9 +8,9 @@
           ref="completeDetailForm"
         ></CompleteDetailForm>
       </el-tab-pane>
-      <!-- <el-tab-pane label="流程图" name="second">
+      <el-tab-pane label="流程图" name="second">
         <CompleteDetailPicture ref="copyDetailPicture"></CompleteDetailPicture>
-      </el-tab-pane> -->
+      </el-tab-pane>
       <el-tab-pane label="流转记录" name="third">
         <CompleteDetailRecords
           :complete_detail="complete_detail"
@@ -22,13 +22,13 @@
 </template>
 <script>
 import CompleteDetailForm from "./completeDetailForm";
-// import CompleteDetailPicture from "./completeDetailPicture";
+import CompleteDetailPicture from "./completeDetailPicture";
 import CompleteDetailRecords from "./completeDetailRecords";
 export default {
   name: "CompleteDetail",
   components: {
     CompleteDetailForm,
-    // CompleteDetailPicture,
+    CompleteDetailPicture,
     CompleteDetailRecords,
   },
   props: {
diff --git a/src/views/closeLoopDispose/components/completeDetailPicture.vue b/src/views/closeLoopDispose/components/completeDetailPicture.vue
index 59fced5..d49b606 100644
--- a/src/views/closeLoopDispose/components/completeDetailPicture.vue
+++ b/src/views/closeLoopDispose/components/completeDetailPicture.vue
@@ -24,6 +24,57 @@
         <div class="picture_text_five">未经过的出口</div>
       </div>
     </div>
+    <div class="picture_item">
+      <div class="start_point">
+        <div class="start_point_item">
+          <div class="start_point_item_text">1.转处置任务治安大队</div>
+        </div>
+      </div>
+      <div class="line_one">
+        <div class="line_item"></div>
+      </div>
+      <div class="line_two">
+        <div class="line_item_one"></div>
+        <div class="line_item_two"></div>
+      </div>
+      <!-- 箭头 -->
+      <div class="arrow_one">
+        <div class="arrow_item_one"></div>
+        <div class="arrow_item_two"></div>
+        <div class="arrow_item_three"></div>
+      </div>
+      <!-- 流程点 -->
+      <div class="next_point">
+        <div class="next_point_item_one">
+          <div class="next_point_item_one_text">1.转处置任务治安大队</div>
+        </div>
+        <div class="next_point_item_two">
+          <div class="next_point_item_two_text">1.转处置任务治安大队</div>
+        </div>
+        <div class="next_point_item_three">
+          <div class="next_point_item_three_text">1.转处置任务治安大队</div>
+        </div>
+      </div>
+      <!-- 流程线 -->
+      <div class="line_three">
+        <div class="line_item_one"></div>
+        <div class="line_item_two"></div>
+      </div>
+      <!-- 流程线 -->
+      <div class="line_four">
+        <div class="line_item"></div>
+      </div>
+      <!-- 箭头 -->
+      <div class="arrow_two">
+        <div class="arrow_item"></div>
+      </div>
+      <!-- 流程终结点 -->
+      <div class="end_point">
+        <div class="end_point_item">
+          <div class="end_point_item_text">1.转处置任务治安大队</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -126,5 +177,224 @@ export default {
       }
     }
   }
+  .picture_item {
+    width: 94vw;
+    height: 60vh;
+    margin-left: 1vw;
+    margin-top: 1vh;
+    display: flex;
+    .start_point {
+      width: 15vw;
+      height: 60vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .start_point_item {
+        width: 15vw;
+        height: 10vh;
+        // margin-top: 18vh;
+        background: url("~@/assets/companyFile/point01.png") no-repeat !important;
+        background-size: 100% 100% !important;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .start_point_item_text {
+        width: 15vw;
+        height: 5vh;
+        color: #c8c8c8;
+        text-align: center;
+        line-height: 5vh;
+      }
+    }
+    .line_one {
+      width: 10vw;
+      height: 60vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .line_item {
+        width: 10vw;
+        height: 2px;
+        background: #278961;
+      }
+    }
+    .line_two {
+      width: 8vw;
+      height: 60vh;
+      display: flex;
+      flex-direction: column-reverse;
+      justify-content: center;
+      .line_item_one {
+        width: 8vw;
+        height: 15vh;
+        border-left: 2px solid #278961;
+        border-bottom: 2px solid #278961;
+        border-top: 1px solid #278961;
+      }
+      .line_item_two {
+        width: 8vw;
+        height: 15vh;
+        border-left: 2px solid #278961;
+        border-top: 2px solid #278961;
+        border-bottom: 1px solid #278961;
+      }
+    }
+    .arrow_one {
+      width: 1.5vw;
+      height: 60vh;
+      display: flex;
+      flex-direction: column;
+      .arrow_item_one {
+        width: 1.5vw;
+        height: 2vh;
+        margin-top: 14vh;
+        background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
+        background-size: 100% 100% !important;
+      }
+      .arrow_item_two {
+        width: 1.5vw;
+        height: 2vh;
+        margin-top: 13vh;
+        background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
+        background-size: 100% 100% !important;
+      }
+      .arrow_item_three {
+        width: 1.5vw;
+        height: 2vh;
+        margin-top: 13vh;
+        background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
+        background-size: 100% 100% !important;
+      }
+    }
+    .next_point {
+      width: 15vw;
+      height: 60vh;
+      display: flex;
+      flex-direction: column;
+      .next_point_item_one {
+        width: 15vw;
+        height: 10vh;
+        margin-top: 10vh;
+        background: url("~@/assets/companyFile/point01.png") no-repeat !important;
+        background-size: 100% 100% !important;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .next_point_item_one_text {
+          width: 15vw;
+          height: 5vh;
+          color: #c8c8c8;
+          text-align: center;
+          line-height: 5vh;
+        }
+      }
+      .next_point_item_two {
+        width: 15vw;
+        height: 10vh;
+        margin-top: 5vh;
+        background: url("~@/assets/companyFile/point02.png") no-repeat !important;
+        background-size: 100% 100% !important;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .next_point_item_two_text {
+          width: 15vw;
+          height: 5vh;
+          color: #c8c8c8;
+          text-align: center;
+          line-height: 5vh;
+        }
+      }
+      .next_point_item_three {
+        width: 15vw;
+        height: 10vh;
+        margin-top: 5vh;
+        background: url("~@/assets/companyFile/point03.png") no-repeat !important;
+        background-size: 100% 100% !important;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .next_point_item_three_text {
+          width: 15vw;
+          height: 5vh;
+          color: #c8c8c8;
+          text-align: center;
+          line-height: 5vh;
+        }
+      }
+    }
+    .line_three {
+      width: 8vw;
+      height: 60vh;
+      display: flex;
+      flex-direction: column-reverse;
+      justify-content: center;
+      .line_item_one {
+        width: 8vw;
+        height: 15vh;
+        border-right: 2px solid #747b7e;
+        border-bottom: 2px solid #747b7e;
+        border-top: 1px solid #747b7e;
+      }
+      .line_item_two {
+        width: 8vw;
+        height: 15vh;
+        border-right: 2px solid #747b7e;
+        border-top: 2px solid #747b7e;
+        border-bottom: 1px solid #747b7e;
+      }
+    }
+    .line_four {
+      width: 10vw;
+      height: 60vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .line_item {
+        width: 10vw;
+        height: 2px;
+        background: #747b7e;
+      }
+    }
+    .arrow_two {
+      width: 1.5vw;
+      height: 60vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .arrow_item {
+        width: 1.5vw;
+        height: 2vh;
+        // border: 0.1px solid #3f5564;
+        background: url("~@/assets/companyFile/rightarrow02.png") no-repeat !important;
+        background-size: 100% 100% !important;
+      }
+    }
+    .end_point {
+      width: 15vw;
+      height: 60vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .end_point_item {
+        width: 15vw;
+        height: 10vh;
+        // margin-top: 18vh;
+        background: url("~@/assets/companyFile/point03.png") no-repeat !important;
+        background-size: 100% 100% !important;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .end_point_item_text {
+          width: 15vw;
+          height: 5vh;
+          color: #c8c8c8;
+          text-align: center;
+          line-height: 5vh;
+        }
+      }
+    }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/closeLoopDispose/components/copyDetail.vue b/src/views/closeLoopDispose/components/copyDetail.vue
index 8f77d01..bb2e702 100644
--- a/src/views/closeLoopDispose/components/copyDetail.vue
+++ b/src/views/closeLoopDispose/components/copyDetail.vue
@@ -8,9 +8,9 @@
           :copy_detail="copy_detail"
         ></CopyDetailForm>
       </el-tab-pane>
-      <!-- <el-tab-pane label="流程图" name="second">
+      <el-tab-pane label="流程图" name="second">
         <CopyDetailPicture ref="copyDetailPicture"></CopyDetailPicture>
-      </el-tab-pane> -->
+      </el-tab-pane>
       <el-tab-pane label="流转记录" name="third">
         <CopyDetailRecords
           ref="copyDetailRecords"
@@ -22,13 +22,13 @@
 </template>
 <script>
 import CopyDetailForm from "./copyDetailForm";
-// import CopyDetailPicture from "./copyDetailPicture";
+import CopyDetailPicture from "./copyDetailPicture";
 import CopyDetailRecords from "./copyDetailRecords";
 export default {
   name: "copyDetail",
   components: {
     CopyDetailForm,
-    // CopyDetailPicture,
+    CopyDetailPicture,
     CopyDetailRecords,
   },
   props: {
diff --git a/src/views/closeLoopDispose/components/copyDetailPicture.vue b/src/views/closeLoopDispose/components/copyDetailPicture.vue
index b27b245..61242d1 100644
--- a/src/views/closeLoopDispose/components/copyDetailPicture.vue
+++ b/src/views/closeLoopDispose/components/copyDetailPicture.vue
@@ -24,6 +24,57 @@
         <div class="picture_text_five">未经过的出口</div>
       </div>
     </div>
+    <div class="picture_item">
+      <div class="start_point">
+        <div class="start_point_item">
+          <div class="start_point_item_text">1.转处置任务治安大队</div>
+        </div>
+      </div>
+      <div class="line_one">
+        <div class="line_item"></div>
+      </div>
+      <div class="line_two">
+        <div class="line_item_one"></div>
+        <div class="line_item_two"></div>
+      </div>
+      <!-- 箭头 -->
+      <div class="arrow_one">
+        <div class="arrow_item_one"></div>
+        <div class="arrow_item_two"></div>
+        <div class="arrow_item_three"></div>
+      </div>
+      <!-- 流程点 -->
+      <div class="next_point">
+        <div class="next_point_item_one">
+          <div class="next_point_item_one_text">1.转处置任务治安大队</div>
+        </div>
+        <div class="next_point_item_two">
+          <div class="next_point_item_two_text">1.转处置任务治安大队</div>
+        </div>
+        <div class="next_point_item_three">
+          <div class="next_point_item_three_text">1.转处置任务治安大队</div>
+        </div>
+      </div>
+      <!-- 流程线 -->
+      <div class="line_three">
+        <div class="line_item_one"></div>
+        <div class="line_item_two"></div>
+      </div>
+      <!-- 流程线 -->
+      <div class="line_four">
+        <div class="line_item"></div>
+      </div>
+      <!-- 箭头 -->
+      <div class="arrow_two">
+        <div class="arrow_item"></div>
+      </div>
+      <!-- 流程终结点 -->
+      <div class="end_point">
+        <div class="end_point_item">
+          <div class="end_point_item_text">1.转处置任务治安大队</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -126,5 +177,224 @@ export default {
       }
     }
   }
+  .picture_item {
+    width: 94vw;
+    height: 60vh;
+    margin-left: 1vw;
+    margin-top: 1vh;
+    display: flex;
+    .start_point {
+      width: 15vw;
+      height: 60vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .start_point_item {
+        width: 15vw;
+        height: 10vh;
+        // margin-top: 18vh;
+        background: url("~@/assets/companyFile/point01.png") no-repeat !important;
+        background-size: 100% 100% !important;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .start_point_item_text {
+        width: 15vw;
+        height: 5vh;
+        color: #c8c8c8;
+        text-align: center;
+        line-height: 5vh;
+      }
+    }
+    .line_one {
+      width: 10vw;
+      height: 60vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .line_item {
+        width: 10vw;
+        height: 2px;
+        background: #278961;
+      }
+    }
+    .line_two {
+      width: 8vw;
+      height: 60vh;
+      display: flex;
+      flex-direction: column-reverse;
+      justify-content: center;
+      .line_item_one {
+        width: 8vw;
+        height: 15vh;
+        border-left: 2px solid #278961;
+        border-bottom: 2px solid #278961;
+        border-top: 1px solid #278961;
+      }
+      .line_item_two {
+        width: 8vw;
+        height: 15vh;
+        border-left: 2px solid #278961;
+        border-top: 2px solid #278961;
+        border-bottom: 1px solid #278961;
+      }
+    }
+    .arrow_one {
+      width: 1.5vw;
+      height: 60vh;
+      display: flex;
+      flex-direction: column;
+      .arrow_item_one {
+        width: 1.5vw;
+        height: 2vh;
+        margin-top: 14vh;
+        background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
+        background-size: 100% 100% !important;
+      }
+      .arrow_item_two {
+        width: 1.5vw;
+        height: 2vh;
+        margin-top: 13vh;
+        background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
+        background-size: 100% 100% !important;
+      }
+      .arrow_item_three {
+        width: 1.5vw;
+        height: 2vh;
+        margin-top: 13vh;
+        background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
+        background-size: 100% 100% !important;
+      }
+    }
+    .next_point {
+      width: 15vw;
+      height: 60vh;
+      display: flex;
+      flex-direction: column;
+      .next_point_item_one {
+        width: 15vw;
+        height: 10vh;
+        margin-top: 10vh;
+        background: url("~@/assets/companyFile/point01.png") no-repeat !important;
+        background-size: 100% 100% !important;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .next_point_item_one_text {
+          width: 15vw;
+          height: 5vh;
+          color: #c8c8c8;
+          text-align: center;
+          line-height: 5vh;
+        }
+      }
+      .next_point_item_two {
+        width: 15vw;
+        height: 10vh;
+        margin-top: 5vh;
+        background: url("~@/assets/companyFile/point02.png") no-repeat !important;
+        background-size: 100% 100% !important;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .next_point_item_two_text {
+          width: 15vw;
+          height: 5vh;
+          color: #c8c8c8;
+          text-align: center;
+          line-height: 5vh;
+        }
+      }
+      .next_point_item_three {
+        width: 15vw;
+        height: 10vh;
+        margin-top: 5vh;
+        background: url("~@/assets/companyFile/point03.png") no-repeat !important;
+        background-size: 100% 100% !important;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .next_point_item_three_text {
+          width: 15vw;
+          height: 5vh;
+          color: #c8c8c8;
+          text-align: center;
+          line-height: 5vh;
+        }
+      }
+    }
+    .line_three {
+      width: 8vw;
+      height: 60vh;
+      display: flex;
+      flex-direction: column-reverse;
+      justify-content: center;
+      .line_item_one {
+        width: 8vw;
+        height: 15vh;
+        border-right: 2px solid #747b7e;
+        border-bottom: 2px solid #747b7e;
+        border-top: 1px solid #747b7e;
+      }
+      .line_item_two {
+        width: 8vw;
+        height: 15vh;
+        border-right: 2px solid #747b7e;
+        border-top: 2px solid #747b7e;
+        border-bottom: 1px solid #747b7e;
+      }
+    }
+    .line_four {
+      width: 10vw;
+      height: 60vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .line_item {
+        width: 10vw;
+        height: 2px;
+        background: #747b7e;
+      }
+    }
+    .arrow_two {
+      width: 1.5vw;
+      height: 60vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .arrow_item {
+        width: 1.5vw;
+        height: 2vh;
+        // border: 0.1px solid #3f5564;
+        background: url("~@/assets/companyFile/rightarrow02.png") no-repeat !important;
+        background-size: 100% 100% !important;
+      }
+    }
+    .end_point {
+      width: 15vw;
+      height: 60vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .end_point_item {
+        width: 15vw;
+        height: 10vh;
+        // margin-top: 18vh;
+        background: url("~@/assets/companyFile/point03.png") no-repeat !important;
+        background-size: 100% 100% !important;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .end_point_item_text {
+          width: 15vw;
+          height: 5vh;
+          color: #c8c8c8;
+          text-align: center;
+          line-height: 5vh;
+        }
+      }
+    }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/closeLoopDispose/components/myCourseDetail.vue b/src/views/closeLoopDispose/components/myCourseDetail.vue
index 7aca28d..83d8f42 100644
--- a/src/views/closeLoopDispose/components/myCourseDetail.vue
+++ b/src/views/closeLoopDispose/components/myCourseDetail.vue
@@ -5,9 +5,9 @@
       <el-tab-pane label="表单信息" name="first">
         <MyCourseDetailForm ref="myCourseDetailForm" :send_detail="send_detail"></MyCourseDetailForm>
       </el-tab-pane>
-      <!-- <el-tab-pane label="流程图" name="second">
+      <el-tab-pane label="流程图" name="second">
         <MyCourseDetailPicture ref="myCourseDetailPicture"></MyCourseDetailPicture>
-      </el-tab-pane> -->
+      </el-tab-pane>
       <el-tab-pane label="流转记录" name="third">
         <MyCourseDetailRecords ref="myCourseDetailRecords" :send_detail="send_detail"></MyCourseDetailRecords>
       </el-tab-pane>
@@ -16,13 +16,13 @@
 </template>
 <script>
 import MyCourseDetailForm from "./myCourseDetailForm";
-// import MyCourseDetailPicture from "./myCourseDetailPicture";
+import MyCourseDetailPicture from "./myCourseDetailPicture";
 import MyCourseDetailRecords from './myCourseDetailRecords'
 export default {
   name: "MyCourseDetail",
   components:{
     MyCourseDetailForm,
-    // MyCourseDetailPicture,
+    MyCourseDetailPicture,
     MyCourseDetailRecords
   },
   props:{
diff --git a/src/views/closeLoopDispose/components/myCourseDetailPicture.vue b/src/views/closeLoopDispose/components/myCourseDetailPicture.vue
index 218f704..a4161c3 100644
--- a/src/views/closeLoopDispose/components/myCourseDetailPicture.vue
+++ b/src/views/closeLoopDispose/components/myCourseDetailPicture.vue
@@ -24,6 +24,57 @@
         <div class="picture_text_five">未经过的出口</div>
       </div>
     </div>
+    <div class="picture_item">
+      <div class="start_point">
+        <div class="start_point_item">
+          <div class="start_point_item_text">1.转处置任务治安大队</div>
+        </div>
+      </div>
+      <div class="line_one">
+        <div class="line_item"></div>
+      </div>
+      <div class="line_two">
+        <div class="line_item_one"></div>
+        <div class="line_item_two"></div>
+      </div>
+      <!-- 箭头 -->
+      <div class="arrow_one">
+        <div class="arrow_item_one"></div>
+        <div class="arrow_item_two"></div>
+        <div class="arrow_item_three"></div>
+      </div>
+      <!-- 流程点 -->
+      <div class="next_point">
+        <div class="next_point_item_one">
+          <div class="next_point_item_one_text">1.转处置任务治安大队</div>
+        </div>
+        <div class="next_point_item_two">
+          <div class="next_point_item_two_text">1.转处置任务治安大队</div>
+        </div>
+        <div class="next_point_item_three">
+          <div class="next_point_item_three_text">1.转处置任务治安大队</div>
+        </div>
+      </div>
+      <!-- 流程线 -->
+      <div class="line_three">
+        <div class="line_item_one"></div>
+        <div class="line_item_two"></div>
+      </div>
+      <!-- 流程线 -->
+      <div class="line_four">
+        <div class="line_item"></div>
+      </div>
+      <!-- 箭头 -->
+      <div class="arrow_two">
+        <div class="arrow_item"></div>
+      </div>
+      <!-- 流程终结点 -->
+      <div class="end_point">
+        <div class="end_point_item">
+          <div class="end_point_item_text">1.转处置任务治安大队</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -126,5 +177,224 @@ export default {
       }
     }
   }
+  .picture_item {
+    width: 94vw;
+    height: 60vh;
+    margin-left: 1vw;
+    margin-top: 1vh;
+    display: flex;
+    .start_point {
+      width: 15vw;
+      height: 60vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .start_point_item {
+        width: 15vw;
+        height: 10vh;
+        // margin-top: 18vh;
+        background: url("~@/assets/companyFile/point01.png") no-repeat !important;
+        background-size: 100% 100% !important;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .start_point_item_text {
+        width: 15vw;
+        height: 5vh;
+        color: #c8c8c8;
+        text-align: center;
+        line-height: 5vh;
+      }
+    }
+    .line_one {
+      width: 10vw;
+      height: 60vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .line_item {
+        width: 10vw;
+        height: 2px;
+        background: #278961;
+      }
+    }
+    .line_two {
+      width: 8vw;
+      height: 60vh;
+      display: flex;
+      flex-direction: column-reverse;
+      justify-content: center;
+      .line_item_one {
+        width: 8vw;
+        height: 15vh;
+        border-left: 2px solid #278961;
+        border-bottom: 2px solid #278961;
+        border-top: 1px solid #278961;
+      }
+      .line_item_two {
+        width: 8vw;
+        height: 15vh;
+        border-left: 2px solid #278961;
+        border-top: 2px solid #278961;
+        border-bottom: 1px solid #278961;
+      }
+    }
+    .arrow_one {
+      width: 1.5vw;
+      height: 60vh;
+      display: flex;
+      flex-direction: column;
+      .arrow_item_one {
+        width: 1.5vw;
+        height: 2vh;
+        margin-top: 14vh;
+        background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
+        background-size: 100% 100% !important;
+      }
+      .arrow_item_two {
+        width: 1.5vw;
+        height: 2vh;
+        margin-top: 13vh;
+        background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
+        background-size: 100% 100% !important;
+      }
+      .arrow_item_three {
+        width: 1.5vw;
+        height: 2vh;
+        margin-top: 13vh;
+        background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
+        background-size: 100% 100% !important;
+      }
+    }
+    .next_point {
+      width: 15vw;
+      height: 60vh;
+      display: flex;
+      flex-direction: column;
+      .next_point_item_one {
+        width: 15vw;
+        height: 10vh;
+        margin-top: 10vh;
+        background: url("~@/assets/companyFile/point01.png") no-repeat !important;
+        background-size: 100% 100% !important;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .next_point_item_one_text {
+          width: 15vw;
+          height: 5vh;
+          color: #c8c8c8;
+          text-align: center;
+          line-height: 5vh;
+        }
+      }
+      .next_point_item_two {
+        width: 15vw;
+        height: 10vh;
+        margin-top: 5vh;
+        background: url("~@/assets/companyFile/point02.png") no-repeat !important;
+        background-size: 100% 100% !important;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .next_point_item_two_text {
+          width: 15vw;
+          height: 5vh;
+          color: #c8c8c8;
+          text-align: center;
+          line-height: 5vh;
+        }
+      }
+      .next_point_item_three {
+        width: 15vw;
+        height: 10vh;
+        margin-top: 5vh;
+        background: url("~@/assets/companyFile/point03.png") no-repeat !important;
+        background-size: 100% 100% !important;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .next_point_item_three_text {
+          width: 15vw;
+          height: 5vh;
+          color: #c8c8c8;
+          text-align: center;
+          line-height: 5vh;
+        }
+      }
+    }
+    .line_three {
+      width: 8vw;
+      height: 60vh;
+      display: flex;
+      flex-direction: column-reverse;
+      justify-content: center;
+      .line_item_one {
+        width: 8vw;
+        height: 15vh;
+        border-right: 2px solid #747b7e;
+        border-bottom: 2px solid #747b7e;
+        border-top: 1px solid #747b7e;
+      }
+      .line_item_two {
+        width: 8vw;
+        height: 15vh;
+        border-right: 2px solid #747b7e;
+        border-top: 2px solid #747b7e;
+        border-bottom: 1px solid #747b7e;
+      }
+    }
+    .line_four {
+      width: 10vw;
+      height: 60vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .line_item {
+        width: 10vw;
+        height: 2px;
+        background: #747b7e;
+      }
+    }
+    .arrow_two {
+      width: 1.5vw;
+      height: 60vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .arrow_item {
+        width: 1.5vw;
+        height: 2vh;
+        // border: 0.1px solid #3f5564;
+        background: url("~@/assets/companyFile/rightarrow02.png") no-repeat !important;
+        background-size: 100% 100% !important;
+      }
+    }
+    .end_point {
+      width: 15vw;
+      height: 60vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .end_point_item {
+        width: 15vw;
+        height: 10vh;
+        // margin-top: 18vh;
+        background: url("~@/assets/companyFile/point03.png") no-repeat !important;
+        background-size: 100% 100% !important;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .end_point_item_text {
+          width: 15vw;
+          height: 5vh;
+          color: #c8c8c8;
+          text-align: center;
+          line-height: 5vh;
+        }
+      }
+    }
+  }
 }
 </style>
\ No newline at end of file