From fb2c37b276e74b60dc9e895f8b2aace00900a258 Mon Sep 17 00:00:00 2001
From: lukeyan <1727408482@qq.com>
Date: Wed, 14 Jun 2023 17:28:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=81=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/companyFile/09091.png              | Bin 0 -> 27805 bytes
 src/assets/companyFile/rightarrow.png         | Bin 0 -> 378 bytes
 src/assets/companyFile/rightarrow02.png       | Bin 0 -> 351 bytes
 .../components/myCourseDetail.vue             |  14 +-
 .../components/myCourseDetailForm.vue         |   1 +
 .../components/myCourseDetailPicture.vue      | 130 ++++++++++++++++++
 .../components/myCourseDetailRecords.vue      |  73 ++++++++++
 7 files changed, 215 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/companyFile/09091.png
 create mode 100644 src/assets/companyFile/rightarrow.png
 create mode 100644 src/assets/companyFile/rightarrow02.png
 create mode 100644 src/views/closeLoopDispose/components/myCourseDetailPicture.vue
 create mode 100644 src/views/closeLoopDispose/components/myCourseDetailRecords.vue

diff --git a/src/assets/companyFile/09091.png b/src/assets/companyFile/09091.png
new file mode 100644
index 0000000000000000000000000000000000000000..e42549a7ac4223d0a62e36b3c90921f797705afb
GIT binary patch
literal 27805
zcmeI5Ur19?9LLYy)|~TC3rW-lX+edGOnR|Im~){6l_il2q%MY56k#r@9*j*X7xofG
z?j`i8r;sUv4Z`k&NT3w-B4Oza42oh8{cmaAyWu_Cap&$O=;iw`Jl^fzo%_9?dw$>h
z`yG$B+^vmy<`Od@B+u34Y$GJgMu^^QGRj*%*j~yTh~RB&bdd4q*7x!+&MuFuyQPJc
z%WV@8hRzX#@)7w}BERHa#{{C6e+tUBG2Q07S++6#W?Qd(8)>&rtrB7<E@%C*tHQ@u
z)pvBn(r{FCI~oT4cYErL?qUD=vmu?gYNL6%{MpRCLmSJxM+f)XeMHb1OqSAg4ZA(^
zdvvuo7B)@>(!H<lDutw2^ylHcKhZw!!ITeo>WmAXvbX8KEpaqYp-rrsj$Y9^PPL%#
zeq_1C>2>@#l{rPWk)`jo{F5X8piek>JW#_sd*wLyx8(-sKgAv-`j%d#X31Av;k0UX
zcwRp5wQuXK8e*636Q$cb_vCAJxJ%H#>y2ICuW>Cb1vYWcykkhC!_uTr@P_-J7Nk9$
z#EyaNBHQU3fd-8Zizg&s`1Q<6w#L<*HRJ{-9J6H_9S&8BQpd%WsMb{gHe4!z4Ie*X
z18f)tFxv2gCV~_<XaXBx!+IEa8?NKE!xFQ!s4fNA02@XDJV~i{$Cd^jz!?Wi2Nqzn
zg%;JN02^SV!jNbn-A9KGHm!$rA2<C7Y=8}`0E!EYgQepMiVOUz3a|k-tYt+hlbdu!
zDU)%qNtPbi02@XDOq}3*cubt24h`7EIl;sU){4;E2NNffLM@d=3CF+&*suy<;sg^@
z=p!&DPVhZEumLuy!NrG(6LjccldhOJ!Ofll8(_mKfC@O*!(-wE>tJaZ0ye;gv8<?o
zvsQ%OKA1Q`hYny9R{#}o){0OtPyy$9cwhr;*n9{o;B@GqF*m^pD&Q<Fs!M7Aaq}`E
z6)|Nk03ZZ}7zO;OhNBwJ_z;ve+4w@AYfug6rbK`ZuwfNIS(9tbPz`6SNYcOpY=8}o
zxp7WV*5s!|{#!L%ny#yTC|Jzmfya@RLZfG6pm1P#<coD`ae}#gah_)l*5E{ah84gf
zQpd?t8CHDD>b{U^#kU&U$l_v#rP}<(yD}}+mcOv}wNHDEwH|TKm}!kQz4u!G8|}r>
zAPr~C12t+ghiyO_RuR>JLK;YuYB1%Z3Wj0z{zz#+8YTrsbApft(j+~ZDz?^A0L#aL
z0@83yEU4ky5l91RQk|N756$cF<juhX(xiCT<N+7bK$_H{L{1wc%a<MsNW(F)cI8j+
zKn<u#=A$wP6@}zbn^fO{G#sa9FhLqf!_;l7g@04MjQsli<VAmHShJjJ7u^y4((Lv#
T>!GGW<zIujj<h<*9pb=W&qQ-D

literal 0
HcmV?d00001

diff --git a/src/assets/companyFile/rightarrow.png b/src/assets/companyFile/rightarrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..be6adf8c8a22d75a17105f11c1efc251cc6efd04
GIT binary patch
literal 378
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`jKx9jP7LeL$-D$|Tv8)E(|mmy
zw18|52FCVG1{RPKAeI7R1_tH@j10^`nh_+nfC(-uuz(rC1}QWNE&K$eo_M-AhFAzD
zCrAh#c=`Y0*>nH<mnIkM2%9;U7`m~wP5m$N&$sYb{T=bxz6`qyqE{XMT>be!FgV56
z;czFr19KW<=x<}g4Uz8>P4=>1@|+@`5O%{bBGu5~kNxldhtJEN|5tBye59jr=;Qy3
zehR9*NspP?CHokcO4c*-1|}!`*erFTQ0XM=4IXt(9;tu-(=Cq_ln7r?NOfZiTfMjE
zS^mMe18GKP8=ZNMFJs)Bz{7iFyMn2UG((r$f?pX6Cd(!mHk=h&lXPH5f8n3{C+6E)
uTtXE7r6+KtCncP^c|2pM<Z51KEe?hc)=memJwImy^0%j}pUXO@geCyr)_*Sm

literal 0
HcmV?d00001

diff --git a/src/assets/companyFile/rightarrow02.png b/src/assets/companyFile/rightarrow02.png
new file mode 100644
index 0000000000000000000000000000000000000000..26778611e67f45c14df28e0f9f989d00bae21dbc
GIT binary patch
literal 351
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`jKx9jP7LeL$-D$|Tv8)E(|mmy
zw18|52FCVG1{RPKAeI7R1_tH@j10^`nh_+nfC(-uuz(rC1}QWNE&K$ePI|gHhFAzD
zCrAiAcye;`>_!XO*~v3Ea4zaLG%{NE=l}ozQ-YWK{akcf@GSeT1yUXRnRpFduN~<)
zqj<!w@X-;S1yc2CX=&cU!I!HQzN$zvd|~6hAUeAtE{N^bRwHxs`qNBCtQt2smn?D2
zsbP3g!?xgAyhHPqhA&wQqSO~L3C>@5<s*}w^n|AkadX+8NE;g(HZpzG_283XJJD6J
zv2oVw#-fW3`>hWoF-(u*DNJ~9lwt7)^KC6IAqq^+wlW#TeKTj?OyjxC9>c&;Jl$sr
TgDn3vkmo#I{an^LB{Ts5%4=?f

literal 0
HcmV?d00001

diff --git a/src/views/closeLoopDispose/components/myCourseDetail.vue b/src/views/closeLoopDispose/components/myCourseDetail.vue
index f09e9b8..d02ff70 100644
--- a/src/views/closeLoopDispose/components/myCourseDetail.vue
+++ b/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 {
diff --git a/src/views/closeLoopDispose/components/myCourseDetailForm.vue b/src/views/closeLoopDispose/components/myCourseDetailForm.vue
index d058fee..a03de00 100644
--- a/src/views/closeLoopDispose/components/myCourseDetailForm.vue
+++ b/src/views/closeLoopDispose/components/myCourseDetailForm.vue
@@ -82,6 +82,7 @@
 </template>
 <script>
 export default {
+  name: "MyCourseDetailForm",
   data() {
     return {
       attachment_show: true, // 附件 按需显示或者隐藏
diff --git a/src/views/closeLoopDispose/components/myCourseDetailPicture.vue b/src/views/closeLoopDispose/components/myCourseDetailPicture.vue
new file mode 100644
index 0000000..218f704
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/closeLoopDispose/components/myCourseDetailRecords.vue b/src/views/closeLoopDispose/components/myCourseDetailRecords.vue
new file mode 100644
index 0000000..1ed0fc6
--- /dev/null
+++ b/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>
\ No newline at end of file