feat:调整事件概况放大图和定位

chenyao

2025-04-17 7a69d8affdf0f9ef789528014e608f1590dba7c3

 src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue

@@ -1,6 +1,6 @@
<template>
   <div class="event-overviewdetail-right" :class="{ isMore }">
      <CommonTitle title="事件概况" :style="{right: isMore?pxToRem(410):pxToRem(0)}" />
      <CommonTitle title="事件概况" :style="{width: isMore?pxToRem(820):pxToRem(404)}" />

      <div class="content">
         <img class="leftArrow" :class="isMore?'rightArrow':''" :src="isMore ? rightArrowImg : leftArrowImg" @click="leftArrowFun" alt="" />
@@ -70,15 +70,15 @@
                  class="eventListItemImg"
                  :src="getSmallImg(item.photo_url)"
                  alt=""
                  @click="getFindImgHistory(item.id)"
                  @click="getFindImgHistory(item)"
               />
               <div class="eventListItemPosition" :title="item.address" @click="positioning(item)">
                  <img :src="positioningImg" alt="" title="点击定位" />
                  <div class="address">{{ item.address }}</div>
                  <!-- <div class="address">{{ item.address }}</div> -->
               </div>
               <div class="eventListItemText">
                  <div class="eventListItemName">{{ item.event_name }}</div>
                  <div class="eventListItemTime">{{ item.create_time }}</div>
                  <div class="eventListItemTime">{{ dayjs(item.create_time).format('MM/DD HH:mm') }}</div>
               </div>
            </div>
         </div>
@@ -96,7 +96,7 @@
         </div>
      </div>
   </div>
   <div class="image-list" v-if="isShowBigImg">
   <div class="image-list" v-if="isShowBigImg" :style="{ right: isMore?pxToRem(840):pxToRem(460) }">
      <div class="title">
         <img @click="isShowBigImg=false" src="@/assets/images/home/useEventOperate/close.png" alt="">
      </div>
@@ -195,10 +195,18 @@
   })
}
const { flyTo } = cesiumOperation()
const longitudeOffset = ref(0);
const positioning = row => {
   const longitude = Number(row.longitude)
   const latitude = Number(row.latitude)
   flyTo({ longitude, latitude }, 1, 1000)
   // ismore 单独点击定位和未展开都为0 ismore为false 展开大图 值为0.004 ismore=true & isShowBigImg=true 展开大图 值为0.005
   if (isMore.value) {
      longitudeOffset.value = isShowBigImg.value ? 0.005 : 0.003
   }
   if (!isMore.value) {
      longitudeOffset.value = isShowBigImg.value ? 0.003 : 0;
   }
   flyTo({ longitude: longitude + longitudeOffset.value, latitude }, 1, 1000);
}

// 事件状态+数量
@@ -271,13 +279,16 @@
const clickImgSrc = ref('');
const selectedImgIndex = ref(0);
// 点击图片放大 显示详细信息
const getFindImgHistory = (id) => {
   findImgHistory(id).then((res) => {
const getFindImgHistory = (item) => {
   // 下半部分隐藏 右侧隐藏
   isShowBigImg.value = true
   store.commit('setHideBottomIcon', false)
   findImgHistory(item.id).then((res) => {
      if (res.data.code !== 0) return
      imageList.value = res.data.data
      clickImgSrc.value = res.data.data[0]?.url;
      isShowBigImg.value = true
   })
   positioning(item);
}
// 点击周期
const clickWeekTime = (item,index) => {
@@ -529,11 +540,11 @@
}
.image-list {
   position: absolute;
   left: 40%;
   transform: translate(-40%);
   bottom: 218px;
   width: 524px;
   height: 382px;
   z-index: 10;
   right: 460px;
   top: 122px;
   width: 800px;
   height: 600px;
   background: #0F1929;
   box-shadow: inset 0px -50px 50px 0px rgba(27,148,255,0.13);
   border-radius: 0px 0px 0px 0px;
@@ -551,15 +562,16 @@
      }
   }
   .content {
      width: 475px;
      height: 231px;
      width: 740px;
      height: 440px;
      box-shadow: 1px 3px 6px 0px rgba(81,168,255,0.58);
      border-radius: 20px 20px 20px 20px;
      border-image: linear-gradient(180deg, rgba(81, 168, 255, 1), rgba(189, 228, 255, 1)) 2 2;
      margin: 28px 28px;
      img {
         width: 100%;
         height: 230px;
         height: 100%;
         border-radius: 20px 20px 20px 20px;
      }
   }
   .card {