时间线组件

src/views/event/TimeLine.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="body-card">
+    <div class="capsule-rectangle">
+      <img :src="closeEventCheck" style="width: 13px; margin-top: 15px" />
+      <div class="circle" style="background-color: #cadef7" />
+      <div class="circle" style="background-color: #7fc2fc" />
+      <div class="circle" style="background-color: #cadef7" />
+      <img :src="endCommand" style="width: 13px" />
+      <div class="circle" style="background-color: #eaeaea" />
+      <div class="circle" style="background-color: #d8d8d8" />
+      <div class="circle" style="background-color: #eaeaea" />
+      <img :src="enterCommand" style="width: 13px" />
+      <div class="circle" style="background-color: #eaeaea" />
+      <div class="circle" style="background-color: #d8d8d8" />
+      <div class="circle" style="background-color: #eaeaea" />
+      <img :src="registration" style="width: 13px; margin-bottom: 15px" />
+    </div>
+    <div class="event-box">
+      <div
+        v-for="item in eventTrackState.items"
+        :key="item.id"
+        style="color: #1c1c1e"
+        class="step-item"
+      >
+        <div class="h3">{{ item.title }}</div>
+        <div class="h4">{{ item.description }}</div>
+      </div>
+    </div>
+  </div>
+
+
+</template>
+
+<script setup lang="ts">
+import closeEvent from "@/assets/images/tracking/closeEvent.png";
+import closeEventCheck from "@/assets/images/tracking/closeEventCheck.png";
+import endCommand from "@/assets/images/tracking/endCommand.png";
+import endCommandCheck from "@/assets/images/tracking/endCommandCheck.png";
+import enterCommand from "@/assets/images/tracking/enterCommand.png";
+import enterCommandCheck from "@/assets/images/tracking/enterCommandCheck.png";
+import registration from "@/assets/images/tracking/registration.png";
+import registrationCheck from "@/assets/images/tracking/registrationCheck.png";
+
+const props = defineProps({
+  eventTrackState: {}
+});
+
+
+</script>
+
+<style scoped lang="scss">
+.capsule-rectangle {
+  width: 20px; /* 设置宽度 */
+  height: 260px; /* 设置高度 */
+  background-color: #f7f7f7; /* 设置背景颜色 */
+  /* 设置上下两头的圆角半径 */
+  border-top-left-radius: 50px;
+  border-top-right-radius: 50px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  /* 如果你想让两侧也稍微圆润，可以设置以下属性（但这里我们保持直角） */
+  /* border-radius: 10px; 这将应用于所有四个角，但我们已经单独设置了上下角 */
+  margin: 20px auto; /* 设置外边距以居中显示 */
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+.circle {
+  width: 8px; /* 设置宽度 */
+  height: 8px; /* 设置高度，与宽度相等以形成一个正方形 */
+  border-radius: 50%; /* 设置边框半径为宽度或高度的一半，以形成一个圆形 */
+  background-color: #3498db; /* 设置背景颜色 */
+}
+.h3 {
+  padding: 16px;
+  font-size: 16px;
+}
+.h4 {
+  padding: 16px;
+  font-size: 13px;
+  color: #c4c5ca;
+}
+.event-box {
+  display: flex;
+  flex-direction: column;
+  margin-top: 10px;
+}
+.body-card {
+  display: flex;
+  justify-content: flex-start;
+  margin-top: -20px;
+}
+.step-item .h4 {
+  margin-top: -30px; /* 调整这个值来改变间隔 */
+}
+</style>

src/views/event/detail.vue

@@ -155,27 +155,9 @@
         </van-tab>
         <van-tab title="事件跟踪">
           <div class="event_tab">
-            <!--            <van-steps direction="vertical" :active="0">-->
-            <!--              <van-step-->
-            <!--                v-for="(item, index) in eventTrackState.items"-->
-            <!--                :key="item.id"-->
-            <!--              >-->
-            <!--                <div class="h3">{{ item.title }}</div>-->
-            <!--                <p>{{ item.description }}</p>-->
-            <!--              </van-step>-->
-            <!--            </van-steps>-->
-            <el-timeline style="max-width: 600px">
-              <el-timeline-item
-                v-for="(item, index) in eventTrackState.items"
-                :key="item.id"
-                :icon="activity.icon"
-                :color="activity.color"
-                :timestamp="activity.timestamp"
-              >
-                <div class="h3">{{ item.title }}</div>
-                {{ item.description }}
-              </el-timeline-item>
-            </el-timeline>
+            <div class="my-time-line">
+              <TimeLine v-model:eventTrackState="eventTrackState" style="margin-left: 0px; margin-right: 0px" />
+            </div>
           </div>
         </van-tab>
         <van-tab title="匹配预案">
@@ -317,6 +299,7 @@ import { getPlanDoc, listPlan } from "@/api/duty/eventing";
 import AssociationPlan from "@/views/event/AssociationPlan.vue";
 import { ElTimeline, ElTimelineItem } from "element-plus";
 import { MoreFilled } from "@element-plus/icons-vue";
+import TimeLine from "@/views/event/TimeLine.vue";
 
 const activities = [
   {
@@ -510,6 +493,7 @@ const onStartEventDialogClose = t => {
   if (t) {
     getEventDetail({ event_id: eventId.value }).then(res => {
       eventInfo.value = res.data;
+       res.data.event_status_tracks.items.reverse()
       eventTrackState.value = res.data.event_status_tracks;
     });
   }
@@ -544,6 +528,7 @@ const refreshData = () => {
   eventId.value = route.query.event_id as string;
   getEventDetail({ event_id: eventId.value }).then(res => {
     eventInfo.value = res.data;
+    res.data.event_status_tracks.items.reverse()
     eventTrackState.value = res.data.event_status_tracks;
     if (!!eventInfo.value.plan_id) {
       getPlan(eventInfo.value.plan_id);
@@ -848,4 +833,8 @@ const refreshData = () => {
     color: #2c81ff;
   }
 }
+.my-time-line {
+  display: flex;
+  justify-content: flex-start;
+}
 </style>