Merge branch 'master' of http://8.136.197.230:3000/ZheJiangNingBo/pingAnQiYeWeb

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="second">
-      <el-tab-pane label="流转记录" name="third">流转记录</el-tab-pane>
+        <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,300 @@
+<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">
+            <i v-if="icon_show" 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.name }}</div>
+            <div class="step_table_top_opeartion">
+              <div class="opeartion_num">
+                <div class="opeartion_num_text">操作者总计:</div>
+                <div class="opeartion_num_val">{{ item.opeartion_num }}</div>
+              </div>
+              <div class="opeartion_num">
+                <div class="opeartion_num_text">已操作:</div>
+                <div class="opeartion_num_val">
+                  {{ item.have_opeartion_num }}
+                </div>
+              </div>
+              <div class="opeartion_num">
+                <div class="opeartion_num_text">未操作:</div>
+                <div class="not_opeartion_num_val">
+                  {{ item.not_opeartion_num }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <el-table
+            height="250"
+            :data="item.table_list"
+            :header-cell-style="table_header"
+            :cell-style="{ background: 'revert', 'text-align': 'center' }"
+          >
+            <el-table-column prop="change" label="实际办理" width="280">
+            </el-table-column>
+            <el-table-column prop="under_change" label="候选办理" width="280">
+            </el-table-column>
+            <el-table-column prop="type" label="操作状态" width="280">
+            </el-table-column>
+            <el-table-column prop="load_time" label="接收时间" width="280">
+            </el-table-column>
+            <el-table-column prop="time" label="操作时间" width="280">
+            </el-table-column>
+            <el-table-column prop="use_time" label="耗时"> </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "MyCourseDetailRecords",
+  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秒",
+            },
+            {
+              change: "吴沁",
+              under_change: "治安大队",
+              type: "已操作",
+              load_time: "2023-06-06 12:53:30",
+              time: "2023-06-06 12:53:30",
+              use_time: "2秒",
+            },
+            {
+              change: "吴沁",
+              under_change: "治安大队",
+              type: "已操作",
+              load_time: "2023-06-06 12:53:30",
+              time: "2023-06-06 12:53:30",
+              use_time: "2秒",
+            },
+            {
+              change: "吴沁",
+              under_change: "治安大队",
+              type: "已操作",
+              load_time: "2023-06-06 12:53:30",
+              time: "2023-06-06 12:53:30",
+              use_time: "2秒",
+            },
+            {
+              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, // 控制图标显示隐藏
+    };
+  },
+  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;
+        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: 5vw;
+            height: 5vh;
+            color: #fff;
+            font-size: 16px;
+            line-height: 5vh;
+            text-align: center;
+          }
+          .opeartion_num_val {
+            width: 2vw;
+            height: 5vh;
+            color: #fff;
+            font-size: 16px;
+            line-height: 5vh;
+            text-align: center;
+          }
+          .not_opeartion_num_val {
+            width: 2vw;
+            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>