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

chenyao

2025-04-17 7a69d8affdf0f9ef789528014e608f1590dba7c3

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

 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 {