feat: 事件聚合80%

罗广辉

2025-04-02 de61feb06c164238302da048c2f05789911e1d17

 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 {