From de61feb06c164238302da048c2f05789911e1d17 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Wed, 02 Apr 2025 19:12:58 +0800
Subject: [PATCH] feat: 事件聚合80%
---
src/views/Home/useEventOperate/EventPopUpBox.vue | 55 +++++++++++++++++++++++++++++++++++++------------------
1 files changed, 37 insertions(+), 18 deletions(-)
diff --git a/src/views/Home/useEventOperate/EventPopUpBox.vue b/src/views/Home/useEventOperate/EventPopUpBox.vue
index a5abd92..dd87e8d 100644
--- a/src/views/Home/useEventOperate/EventPopUpBox.vue
+++ b/src/views/Home/useEventOperate/EventPopUpBox.vue
@@ -1,37 +1,50 @@
<template>
<div class="mapPopUpBox">
<div class="title">
- 违章建筑
+ {{ info.event_name }}
<el-icon class="header-close" @click="props.removeLabel">
<Close />
</el-icon>
</div>
<div class="content">
- <img
- class="eventImage"
- src="@/assets/images/home/useEventOperate/eventErr.png"
- alt="Event Image"
- />
+ <div class="medium">
+ <img v-if="info.media_type === 'PHOTO_TYPE'" class="eventImage" :src="info.url" alt="Event Image" />
+ <video v-else :src="info.url" autoplay muted playsinline preload="metadata" />
+ </div>
+
<div class="details">
<div class="label">位置：</div>
- <div class="value point">112.12345 23.98726</div>
+ <div class="value point">{{ _.round(info.longitude, 3) }}，{{ _.round(info.latitude, 3) }}</div>
<div class="label">时间：</div>
- <div class="value">2025.08.16 22:25</div>
+ <div class="value">{{ info.create_time }}</div>
</div>
</div>
</div>
</template>
<script setup>
+// src="@/assets/images/home/useEventOperate/eventErr.png"
import { Close } from '@element-plus/icons-vue';
-
-const list = [
- { name: '执行中', value: '1', color: '#FFA768' },
- { name: '在线', value: '20', color: '#8EFFAC' },
- { name: '离线', value: '14', color: '#FFFFFF' },
- { name: '异常', value: '25', color: '#FF6262' },
-];
+import { getEventDetails } from '@/api/home/aggregation';
+import _ from 'lodash';
const props = defineProps(['data', 'removeLabel']);
+const loading = ref(true);
+
+const info = ref({
+ event_name: '',
+ status: 1,
+ url: '1',
+ longitude: '',
+ latitude: '',
+ create_time: '04/01 12:41',
+ media_type: 'PHOTO_TYPE',
+});
+onMounted(async () => {
+ loading.value = true;
+ const res = await getEventDetails({ id: props.data.eventId });
+ info.value = res.data.data;
+ loading.value = false;
+});
</script>
<style scoped lang="scss">
@@ -47,7 +60,7 @@
font-weight: 400;
font-size: 18px;
line-height: 16px;
- background: linear-gradient(180deg, #A8E5FB 0%, #E6F8FF 100%);
+ background: linear-gradient(180deg, #a8e5fb 0%, #e6f8ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
@@ -77,10 +90,16 @@
display: flex;
align-items: center;
- img {
+ .medium {
height: 102px;
- width: 102px;
+ width: 120px;
margin-right: 10px;
+
+ > img,
+ video {
+ width: 100%;
+ height: 100%;
+ }
}
.details {
--
Gitblit v1.9.3