流转

src/views/closeLoopDispose/components/myCourseDetail.vue

@@ -5,17 +5,25 @@
       <el-tab-pane label="表单信息" name="first">
         <MyCourseDetailForm ref="myCourseDetailForm"></MyCourseDetailForm>
       </el-tab-pane>
-      <el-tab-pane label="流程图" name="second">流程图</el-tab-pane>
-      <el-tab-pane label="流转记录" name="third">流转记录</el-tab-pane>
+      <el-tab-pane label="流程图" name="second">
+        <MyCourseDetailPicture ref="myCourseDetailPicture"></MyCourseDetailPicture>
+      </el-tab-pane>
+      <el-tab-pane label="流转记录" name="third">
+        <MyCourseDetailRecords ref="myCourseDetailRecords"></MyCourseDetailRecords>
+      </el-tab-pane>
     </el-tabs>
   </div>
 </template>
 <script>
 import MyCourseDetailForm from "./myCourseDetailForm";
+import MyCourseDetailPicture from "./myCourseDetailPicture";
+import MyCourseDetailRecords from './myCourseDetailRecords'
 export default {
   name: "MyCourseDetail",
   components:{
-    MyCourseDetailForm
+    MyCourseDetailForm,
+    MyCourseDetailPicture,
+    MyCourseDetailRecords
   },
   data() {
     return {

src/views/closeLoopDispose/components/myCourseDetailForm.vue

@@ -82,6 +82,7 @@
 </template>
 <script>
 export default {
+  name: "MyCourseDetailForm",
   data() {
     return {
       attachment_show: true, // 附件 按需显示或者隐藏

src/views/closeLoopDispose/components/myCourseDetailPicture.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: "MyCourseDetailPicture",
+  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>

src/views/closeLoopDispose/components/myCourseDetailRecords.vue

@@ -0,0 +1,73 @@
+<template>
+  <!-- 流程记录 -->
+  <div class="record_body">
+    <div class="all_step">
+      <div class="record_step" v-for="item in record_list" :key="item.id">
+        <div class="step">
+            <div class="step_icon"></div>
+        </div>
+        <div class="step_table"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "MyCourseDetailRecords",
+  data() {
+    return {
+      record_list: [
+        {
+          id: "1",
+        },
+        {
+          id: "2",
+        },
+      ],
+    };
+  },
+};
+</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: 20vh;
+  margin-left: 1vw;
+  border: 0.1px solid #3f5564;
+  display: flex;
+  .step {
+    width: 20px;
+    // margin-top: 10%;
+    margin-left: 1vw;
+    height: 100%;
+    border: 0.1px solid #fff;
+    .step_icon {
+        width: 20px;
+    }
+  }
+}
+</style>