完成事件管理时间线组件

auto-imports.d.ts

@@ -316,6 +316,7 @@ declare module 'vue' {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>

src/views/event/TimeLine.vue

@@ -1,19 +1,29 @@
 <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" />
+      <template v-for="(item, index) in eventTrackState.items">
+        <img
+          :src="item.icon"
+          :style="{
+            width: '13px',
+            marginTop: index === 0 ? '15px' : '0',
+            marginBottom:
+              index === eventTrackState.items.length - 1 ? '15px' : '0'
+          }"
+        />
+        <div
+          v-if="index !== eventTrackState.items.length - 1"
+          :class="circleFun1(item)"
+        />
+        <div
+          v-if="index !== eventTrackState.items.length - 1"
+          :class="circleFun2(item)"
+        />
+        <div
+          v-if="index !== eventTrackState.items.length - 1"
+          :class="circleFun1(item)"
+        />
+      </template>
     </div>
     <div class="event-box">
       <div
@@ -22,13 +32,14 @@
         style="color: #1c1c1e"
         class="step-item"
       >
+        <div v-for="i in event_list" :key="i.eventID">
+          <div v-if="i.eventStatus == 0" />
+        </div>
         <div class="h3">{{ item.title }}</div>
         <div class="h4">{{ item.description }}</div>
       </div>
     </div>
   </div>
-
-
 </template>
 
 <script setup lang="ts">
@@ -42,16 +53,57 @@ import registration from "@/assets/images/tracking/registration.png";
 import registrationCheck from "@/assets/images/tracking/registrationCheck.png";
 
 const props = defineProps({
-  eventTrackState: {}
+  eventTrackState: {},
+  eventInfo: {}
+});
+const replaceImage = () => {
+  for (let i in props.eventTrackState.items) {
+    if (props.eventTrackState.items[i].title === "关闭事件") {
+      props.eventTrackState.items[i].icon = props.eventInfo.event_status === "3" ? closeEventCheck : closeEvent;
+    } else if (props.eventTrackState.items[i].title === "结束指挥") {
+      props.eventTrackState.items[i].icon = props.eventInfo.event_status === "2" || "3" ? endCommandCheck : endCommand;
+    } else if (props.eventTrackState.items[i].title === "进入指挥") {
+      props.eventTrackState.items[i].icon = props.eventInfo.event_status === "1" || "2" || "3" ? enterCommandCheck : enterCommand;
+    } else if (props.eventTrackState.items[i].title === "事件登记") {
+      props.eventTrackState.items[i].icon = props.eventInfo.event_status === "0" || "1" || "2" || "3" ? registrationCheck : registration;
+    }
+  }
+};
+const circleFun1 = (item) => {
+  let res;
+  if (item.title === "关闭事件") {
+    res = props.eventInfo.event_status === "3" ? "circle-one" : "circle-three";
+  } else if (item.title === "结束指挥") {
+    res = props.eventInfo.event_status === "2" || "3" ? "circle-one" : "circle-three";
+  } else if (item.title === "进入指挥") {
+    res = props.eventInfo.event_status === "1" || "2" || "3" ? "circle-one" : "circle-three";
+  } else if (item.title === "事件登记") {
+    res = props.eventInfo.event_status === "0" || "1" || "2" || "3" ? "circle-one" : "circle-three";
+  }
+  return res;
+};
+const circleFun2 = (item) => {
+  let res;
+  if (item.title === "关闭事件") {
+    res = props.eventInfo.event_status === "3" ? "circle-two" : "circle-four";
+  } else if (item.title === "结束指挥") {
+    res = props.eventInfo.event_status === "2" || "3" ? "circle-two" : "circle-four";
+  } else if (item.title === "进入指挥") {
+    res = props.eventInfo.event_status === "1" || "2" || "3" ? "circle-two" : "circle-four";
+  } else if (item.title === "事件登记") {
+    res = props.eventInfo.event_status === "0" || "1" || "2" || "3" ? "circle-two" : "circle-four";
+  }
+  return res;
+};
+onMounted(() => {
+  replaceImage();
 });
-
-
 </script>
 
 <style scoped lang="scss">
 .capsule-rectangle {
   width: 20px; /* 设置宽度 */
-  height: 260px; /* 设置高度 */
+  height: 270px; /* 设置高度 */
   background-color: #f7f7f7; /* 设置背景颜色 */
   /* 设置上下两头的圆角半径 */
   border-top-left-radius: 50px;
@@ -72,6 +124,30 @@ const props = defineProps({
   border-radius: 50%; /* 设置边框半径为宽度或高度的一半，以形成一个圆形 */
   background-color: #3498db; /* 设置背景颜色 */
 }
+.circle-one {
+  width: 8px; /* 设置宽度 */
+  height: 8px; /* 设置高度，与宽度相等以形成一个正方形 */
+  border-radius: 50%; /* 设置边框半径为宽度或高度的一半，以形成一个圆形 */
+  background-color: #cadef7;
+}
+.circle-two {
+  width: 8px; /* 设置宽度 */
+  height: 8px; /* 设置高度，与宽度相等以形成一个正方形 */
+  border-radius: 50%; /* 设置边框半径为宽度或高度的一半，以形成一个圆形 */
+  background-color: #7fc2fc;
+}
+.circle-three {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #eaeaea;
+}
+.circle-four {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #d8d8d8;
+}
 .h3 {
   padding: 16px;
   font-size: 16px;
@@ -84,7 +160,7 @@ const props = defineProps({
 .event-box {
   display: flex;
   flex-direction: column;
-  margin-top: 10px;
+  padding-top: 5px;
 }
 .body-card {
   display: flex;
@@ -93,5 +169,6 @@ const props = defineProps({
 }
 .step-item .h4 {
   margin-top: -30px; /* 调整这个值来改变间隔 */
+  height: 50px;
 }
 </style>

src/views/event/detail.vue

@@ -156,7 +156,7 @@
         <van-tab title="事件跟踪">
           <div class="event_tab">
             <div class="my-time-line">
-              <TimeLine v-model:eventTrackState="eventTrackState" style="margin-left: 0px; margin-right: 0px" />
+              <TimeLine v-model:eventTrackState="eventTrackState" :eventInfo="eventInfo" style="margin-left: 0px; margin-right: 0px" />
             </div>
           </div>
         </van-tab>

src/views/threePreventionResponsiblePerson/personInformation.vue

@@ -131,19 +131,6 @@ const showPersonalInformation = item => {
   flex-direction: column;
   margin-left: 10px;
 }
-//.type-name {
-//  background-color: #cde6ff;
-//  height: 25px;
-//  padding: 3px 15px;
-//  font-size: 13px;
-//  color: dodgerblue;
-//  font-weight: bold;
-//  margin-left: 5px;
-//  border-radius: 2px;
-//  &:nth-child(1) {
-//    margin-left: 0;
-//  }
-//}
 .type-name {
   background-color: #cde6ff;
   padding: 3px 15px;