feat: 控制台显示一些信息

罗广辉

2025-04-18 61e6956be147e1e84e7104f16dd47e9f87f20dfd

 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,11 @@
   })
}
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)
   flyTo({ longitude: longitude, latitude:latitude + 0.0002 }, 1, 1000);
}

// 事件状态+数量
@@ -271,13 +272,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) => {
@@ -528,22 +532,23 @@
   justify-content: center;
}
.image-list {
   border: 1px solid red;
   position: absolute;
   left: 40%;
   transform: translate(-40%);
   bottom: 218px;
   width: 524px;
   height: 382px;
   z-index: 1;
   right: 460px;
   top: 122px;
   width: 540px;
   height: 420px;
   background: #0F1929;
   box-shadow: inset 0px -50px 50px 0px rgba(27,148,255,0.13);
   border-radius: 0px 0px 0px 0px;
   // box-shadow: inset 0px -50px 50px 0px rgba(27,148,255,0.13);
   // border-radius: 0px 0px 0px 0px;
   border: 2px solid;
   border-image: linear-gradient(180deg, rgba(81, 168, 255, 0), rgba(48, 111, 202, 1), rgba(255, 255, 255, 1), rgba(27, 148, 255, 1)) 2 2;
   .title {
      position: relative;
      position: absolute;
      text-align: right;
      right: 12px;
      top: 12px;
      // top: 12px;
      img {
         width: 10px;
         height: 10px;
@@ -551,23 +556,21 @@
      }
   }
   .content {
      width: 475px;
      height: 231px;
      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: 10px 10px 10px 10px;
      }
   }
   .card {
      margin: 26px 26px;
      background: linear-gradient( 180deg, rgba(13,30,70,0.72) 0%, #142E6B 100%);
      padding: 0px 10px 0px 10px;
      color: #BECBEA;
      display: flex;
      justify-content: space-between;
      position: relative;
      position: absolute;
      bottom: 0px;
      width: 100%;
      .time-top {
         width: 50px;
         height: 30px;