src/views/closeLoopDispose/components/myCourseDetailRecords.vue

@@ -3,10 +3,55 @@
   <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 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 class="step_table"></div>
       </div>
     </div>
   </div>
@@ -19,13 +64,77 @@ export default {
       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>
@@ -55,19 +164,137 @@ export default {
 /* 不固定高度，给自由展示空间 */
 .record_step {
   width: 94vw;
-  height: 20vh;
+  height: 31vh;
   margin-left: 1vw;
-  border: 0.1px solid #3f5564;
+  //   border: 0.1px solid #3f5564;
   display: flex;
   .step {
-    width: 20px;
+    width: 30px;
     // margin-top: 10%;
     margin-left: 1vw;
     height: 100%;
-    border: 0.1px solid #fff;
+    // border: 0.1px solid #fff;
+    display: flex;
+    flex-direction: column;
     .step_icon {
-        width: 20px;
+      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>