|
|
@@ -0,0 +1,480 @@
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <div class="box">
|
|
|
+ <div class="title">事件详情</div>
|
|
|
+ <van-form disabled>
|
|
|
+ <van-cell-group inset>
|
|
|
+ <van-field v-model="detailsData.address" label="位置" />
|
|
|
+ <van-field v-model="detailsData.type" label="灾害类型" />
|
|
|
+ <van-field v-model="detailsData.data3" label="发生时间" />
|
|
|
+ <van-field v-model="detailsData.data4" label="受伤人数" />
|
|
|
+ <van-field v-model="detailsData.data5" label="死亡人数" />
|
|
|
+ </van-cell-group>
|
|
|
+ </van-form>
|
|
|
+ </div>
|
|
|
+ <div class="box">
|
|
|
+ <div class="title">事件回溯</div>
|
|
|
+ <div class="modern-timeline" style="margin-bottom: 20px">
|
|
|
+ <div
|
|
|
+ v-for="(event, index) in timelineEvents"
|
|
|
+ :key="index"
|
|
|
+ class="timeline-item"
|
|
|
+ :class="{ active: currentProgress >= event.progress }"
|
|
|
+ >
|
|
|
+ <div class="timeline-marker">
|
|
|
+ <div class="marker-dot" />
|
|
|
+ <div
|
|
|
+ v-if="index !== timelineEvents.length - 1"
|
|
|
+ class="marker-line"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="timeline-content">
|
|
|
+ <div class="timeline-time">{{ event.time }}</div>
|
|
|
+ <div class="timeline-desc">{{ event.description }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box">
|
|
|
+ <div class="title">事件动态</div>
|
|
|
+ <div class="modern-timeline green-timeline" style="margin-bottom: 20px">
|
|
|
+ <div
|
|
|
+ v-for="(event, index) in timelineEvents2"
|
|
|
+ :key="index"
|
|
|
+ class="timeline-item"
|
|
|
+ :class="{ active: event.time }"
|
|
|
+ >
|
|
|
+ <div class="timeline-marker">
|
|
|
+ <div class="marker-dot" />
|
|
|
+ <div
|
|
|
+ v-if="index !== timelineEvents2.length - 1"
|
|
|
+ class="marker-line"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="timeline-content">
|
|
|
+ <div class="timeline-time">{{ event.time }}</div>
|
|
|
+ <div class="timeline-desc">{{ event.description }}</div>
|
|
|
+ <div v-if="event.time" class="timeline-status">
|
|
|
+ <van-icon name="passed" color="#4CAF50" />
|
|
|
+ <span>已完成</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref } from "vue";
|
|
|
+
|
|
|
+const route = useRoute();
|
|
|
+const informId = ref(route.query.id);
|
|
|
+
|
|
|
+const detailsData = ref({
|
|
|
+ type: "自然灾害",
|
|
|
+ address: "茂名市电白区黄岭镇石头村",
|
|
|
+ data3: "2024-12-14 12:12:13",
|
|
|
+ data4: 1,
|
|
|
+ data5: 0,
|
|
|
+ longitude: "110.719914",
|
|
|
+ latitude: "21.609269",
|
|
|
+ dataType: "1"
|
|
|
+});
|
|
|
+const timelineEvents = ref([
|
|
|
+ {
|
|
|
+ time: "12:00:00",
|
|
|
+ description: "地震初波到达",
|
|
|
+ progress: 20
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "12:00:05",
|
|
|
+ description: "强震波到达",
|
|
|
+ progress: 40
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "12:00:15",
|
|
|
+ description: "首次余震发生",
|
|
|
+ progress: 60
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "12:01:30",
|
|
|
+ description: "救援系统启动",
|
|
|
+ progress: 80
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "12:05:00",
|
|
|
+ description: "现场救援到达",
|
|
|
+ progress: 100
|
|
|
+ }
|
|
|
+]);
|
|
|
+const timelineEvents2 = ref([
|
|
|
+ {
|
|
|
+ time: "12:00:00",
|
|
|
+ description: "地震发生"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "12:00:05",
|
|
|
+ description: "余震发生"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "12:00:15",
|
|
|
+ description: "救援系统启动"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "12:01:30",
|
|
|
+ description: "现场救援到达"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "12:05:00",
|
|
|
+ description: "后续处理1"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "14:05:00",
|
|
|
+ description: "后续处理2"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "16:05:00",
|
|
|
+ description: "后续处理3"
|
|
|
+ }
|
|
|
+]);
|
|
|
+
|
|
|
+const progress = ref(100); // 当前进度百分比
|
|
|
+const currentProgress = ref(100); // 当前激活的事件进度
|
|
|
+const progress1 = ref(30); // 当前进度百分比
|
|
|
+const currentProgress1 = ref(0); // 当前激活的事件进度
|
|
|
+
|
|
|
+const setProgress = (value: number) => {
|
|
|
+ progress1.value = value;
|
|
|
+ currentProgress1.value = value;
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.container {
|
|
|
+ height: 100vh;
|
|
|
+ padding: 8px 16px;
|
|
|
+ .box {
|
|
|
+ background-color: #ffffff;
|
|
|
+ border: 1px solid #eaedf7;
|
|
|
+ box-shadow: 0 0 4px 0 #4554661a;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-image: linear-gradient(
|
|
|
+ to bottom,
|
|
|
+ #f3f7fd 0%,
|
|
|
+ #f7fafe 20px,
|
|
|
+ #fcfdff 50px,
|
|
|
+ #ffffff 50px,
|
|
|
+ #ffffff 100%
|
|
|
+ );
|
|
|
+ padding: 10px 16px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .icon-line {
|
|
|
+ display: inline-block;
|
|
|
+ width: 6px;
|
|
|
+ height: 16px;
|
|
|
+ background: url("@/assets/images/line.jpg") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 3px;
|
|
|
+ }
|
|
|
+ .box-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 30px;
|
|
|
+ .box-tag {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .tag-active {
|
|
|
+ background-color: #5f9ff2;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+/* 移除表单容器背景 */
|
|
|
+:deep(.van-cell-group) {
|
|
|
+ background: transparent !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 移除每个表单项的背景 */
|
|
|
+:deep(.van-cell) {
|
|
|
+ background: transparent !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 移除内嵌容器的边距和阴影 */
|
|
|
+:deep(.van-cell-group--inset) {
|
|
|
+ margin: 0;
|
|
|
+ box-shadow: none;
|
|
|
+ &::after {
|
|
|
+ border: none !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+:deep(.van-field--disabled) {
|
|
|
+ .van-field__label,
|
|
|
+ .van-field__control {
|
|
|
+ color: rgba(12, 12, 12, 0.93) !important;
|
|
|
+ -webkit-text-fill-color: #4a4848 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 移除禁用蒙层 */
|
|
|
+ .van-field__disabled-mask {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 32px;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+.timeline-container {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 16px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+/* 进度条轨道 */
|
|
|
+.progress-track {
|
|
|
+ width: 6px;
|
|
|
+ height: 300px;
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ border-radius: 3px;
|
|
|
+ margin-right: 16px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+/* 进度条 */
|
|
|
+.progress-bar {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ background: linear-gradient(to top, #4facfe 0%, #00f2fe 100%);
|
|
|
+ border-radius: 3px;
|
|
|
+ transition: height 0.5s ease;
|
|
|
+}
|
|
|
+
|
|
|
+/* 时间轴内容 */
|
|
|
+.timeline-content {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.timeline-event {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ .event-dot {
|
|
|
+ background: #4facfe;
|
|
|
+ transform: scale(1.2);
|
|
|
+ }
|
|
|
+ .event-time {
|
|
|
+ color: #4facfe;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.event-dot {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #ccc;
|
|
|
+ margin-right: 12px;
|
|
|
+ margin-top: 3px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ border: 2px solid white;
|
|
|
+ box-shadow: 0 0 0 2px #f0f0f0;
|
|
|
+}
|
|
|
+
|
|
|
+.event-content {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.event-time {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.event-desc {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ line-height: 1.4;
|
|
|
+}
|
|
|
+
|
|
|
+/* 动画效果 */
|
|
|
+@keyframes pulse {
|
|
|
+ 0% {
|
|
|
+ box-shadow: 0 0 0 0 rgba(79, 172, 254, 0.4);
|
|
|
+ }
|
|
|
+ 70% {
|
|
|
+ box-shadow: 0 0 0 6px rgba(79, 172, 254, 0);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ box-shadow: 0 0 0 0 rgba(79, 172, 254, 0);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.active .event-dot {
|
|
|
+ animation: pulse 1.5s infinite;
|
|
|
+}
|
|
|
+.modern-timeline {
|
|
|
+ position: relative;
|
|
|
+ padding-left: 40px;
|
|
|
+ margin-top: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.timeline-item {
|
|
|
+ position: relative;
|
|
|
+ padding-bottom: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ min-height: 36px;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.timeline-marker {
|
|
|
+ position: absolute;
|
|
|
+ left: -32px;
|
|
|
+ top: 0;
|
|
|
+ width: 32px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.marker-dot {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #e0e0e0;
|
|
|
+ border: 3px solid white;
|
|
|
+ box-shadow: 0 0 0 2px #e0e0e0;
|
|
|
+ z-index: 2;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ margin-top: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.marker-line {
|
|
|
+ flex: 1;
|
|
|
+ width: 2px;
|
|
|
+ background: #e0e0e0;
|
|
|
+ margin-top: 4px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.timeline-content {
|
|
|
+ padding-left: 16px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ min-height: 36px;
|
|
|
+}
|
|
|
+
|
|
|
+.timeline-time {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ line-height: 1.2;
|
|
|
+ margin-top: -2px;
|
|
|
+}
|
|
|
+
|
|
|
+.timeline-desc {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ line-height: 1.4;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+/* 激活状态样式 */
|
|
|
+.timeline-item.active {
|
|
|
+ .marker-dot {
|
|
|
+ background: #4facfe;
|
|
|
+ box-shadow: 0 0 0 2px #4facfe;
|
|
|
+ transform: scale(1.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .marker-line {
|
|
|
+ background: linear-gradient(to bottom, #4facfe, #00f2fe);
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeline-time {
|
|
|
+ color: #4facfe;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeline-desc {
|
|
|
+ color: #222;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.timeline-item.active .marker-dot {
|
|
|
+ animation: pulse 1.5s infinite;
|
|
|
+}
|
|
|
+
|
|
|
+.green-timeline {
|
|
|
+ .timeline-item.active {
|
|
|
+ .marker-dot {
|
|
|
+ background: #4caf50;
|
|
|
+ box-shadow: 0 0 0 2px #4caf50;
|
|
|
+ animation: pulse-green 1.5s infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ .marker-line {
|
|
|
+ background: linear-gradient(to bottom, #4caf50, #8bc34a);
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeline-time {
|
|
|
+ color: #4caf50;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeline-desc {
|
|
|
+ color: #222;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeline-status {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #4caf50;
|
|
|
+
|
|
|
+ .van-icon {
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 绿色脉冲动画 */
|
|
|
+@keyframes pulse-green {
|
|
|
+ 0% {
|
|
|
+ box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
|
|
|
+ }
|
|
|
+ 70% {
|
|
|
+ box-shadow: 0 0 0 8px rgba(76, 175, 80, 0);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
