feat: 名称修改

罗广辉

2025-10-11 02409bfbe15f22fc3b5dccadabfd860a660a49d9

 src/hooks/components/EventPopUpBox.vue

@@ -1,23 +1,40 @@
<template>
  <div class="mapPopUpBox">
    <div class="title">
      <span>{{ info.event_name }}</span>
      <el-icon class="header-close" @click.stop="props.detailClick"><Warning /></el-icon>
     <el-tooltip
            v-if="infoList.resultType === 2"
            effect="dark"
            :content="infoList.eventName"
            placement="top"
            :disabled="!shouldShowTooltip"
         >
            <span ref="titleSpan" class="title-text">
               {{ infoList.eventName?infoList.eventName:'--' }}
            </span>
         </el-tooltip>
         <el-tooltip v-else effect="dark" :content="infoList.nickName" placement="top" :disabled="!shouldShowTooltip">
            <span ref="titleSpan" class="title-text" >
               {{ infoList.nickName }}
            </span>
         </el-tooltip>
   <div>
       <el-icon class="header-close" @click.stop="props.detailClick"><Warning /></el-icon>
      <el-icon class="header-close" @click.stop="props.removeLabel">
        <Close />
      </el-icon>
   </div>
    </div>
    <div class="content">
      <div class="medium">
        <!-- <img
        <img
          class="quanjing"
          @click="clickpanorama(infoList)"
          v-if="infoList?.resultType === 5"
          :src="infoList?.link"
          alt=""
        /> -->
        />
        <el-image
         
          v-else
          class="eventImage"
          :src="getSmallImg(infoList?.link)"
          :preview-src-list="[getSmallImg(infoList?.link)]"
@@ -27,6 +44,12 @@
      </div>

      <div class="details">
        <div class="label" v-if="infoList.resultType === 2">事件编号：</div>
        <div class="value point" v-if="infoList.resultType === 2">
          {{
            infoList?.eventNum ? infoList?.eventNum : '--'
          }}
        </div>
        <div class="label">时间：</div>
        <div class="value point">
          {{
@@ -36,22 +59,16 @@
        </div>
        <div class="label">地点：</div>
        <div class="value">
          {{ _.round(infoList?.metadata?.shootPosition?.lng, 3) }}，{{
            _.round(infoList?.metadata?.shootPosition?.lat, 3)
          {{ _.round(infoList?.metadata?.shootPosition?.lng, 6) }}，{{
            _.round(infoList?.metadata?.shootPosition?.lat, 6)
          }}
        </div>
      </div>
    </div>

  </div>
      <!-- 全景预览 -->
    <!-- <PanoramaPopup
   class="quanjing"
      v-model:panoramaParamsShow="panoramaParamsShow"
      v-model:panoramaParamsUrl="panoramaParamsUrl"
    ></PanoramaPopup> -->
</template>
<script setup>
import EventBus from '@/utils/eventBus';
import { ElImage, ElIcon } from 'element-plus';
import { Close, Warning } from '@element-plus/icons-vue';
import _ from 'lodash';
@@ -59,6 +76,7 @@
const props = defineProps(['data', 'removeLabel', 'detailClick']);
const loading = ref(true);
import PanoramaPopup from '@/components/PanoramaPopup/PanoramaPopup.vue'; //全景
const emit = defineEmits(['update:panoramaParamsShow', 'update:panoramaParamsUrl']);
const info = ref({
  event_name: '',
  status: 1,
@@ -68,19 +86,25 @@
  create_time: '04/01 12:41',
});
const infoList = props.data;
const panoramaParamsShow = ref(false);
const panoramaParamsUrl = ref(null);
console.log('infoList',infoList);

const clickpanorama = val => {
  panoramaParamsShow.value = true;
  panoramaParamsUrl.value = val.link;
  // 通过事件总线发送全景参数
  EventBus.emit('open-panorama', {
    show: true,
    url: val.link,
  });
  // 保留原有事件触发，确保兼容性
  emit('update:panoramaParamsShow', true);
  emit('update:panoramaParamsUrl', val.link);
};
onMounted(async () => {});
</script>

<style scoped lang="scss">
.mapPopUpBox {
  width: 271px;
  height: 153px;
  width: 291px;
  height: 183px;
  // background: url('@/assets/images/dataCenter/datamap/popUpBox.png') no-repeat center / 100% 100%;
  border-radius: 20px;
  background-color: #fff;
@@ -93,19 +117,18 @@
    font-weight: 400;
    font-size: 18px;
    line-height: 16px;
    background: linear-gradient(180deg, #a8e5fb 0%, #e6f8ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: end;

    .header-close {
    justify-content: space-between;
   
    .title-text {
     color: black;
    }
      div{
      display: flex;
      align-items: center;
      .header-close {
      width: 20px;
      height: 100%;
      line-height: 100%;
@@ -115,17 +138,19 @@
      pointer-events: all;
      cursor: pointer;
    }
      }
    
  }

  .content {
    height: 102px;
    width: 240px;
    height: 132px;
    // width: 240px;
    display: flex;
    align-items: center;

    .medium {
      height: 102px;
      width: 120px;
      height: 122px;
      width: 140px;
      margin-right: 10px;

      > img,
@@ -153,10 +178,11 @@
        color: black;
        line-height: 16px;
        margin-bottom: 2px;
        white-space: nowrap;
      }

      .point {
        margin-bottom: 14px;
        margin-bottom: 10px;
      }
    }
  }