feat:事件弹窗显示调整

shuishen

2025-04-16 a7e6761ba0cfccdf33ed552eb2d3b783c8e4ab4a

 src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue

@@ -68,13 +68,7 @@
            <div class="eventListItem" v-for="item in list">
               <img
                  class="eventListItemImg"
                  :src="
                     item.photo_url
                        ? item.photo_url.substring(0, item.photo_url.lastIndexOf('.')) +
                          '_small' +
                          item.photo_url.substring(item.photo_url.lastIndexOf('.'))
                        : ''
                  "
                  :src="getSmallImg(item.photo_url)"
                  alt=""
               />
               <div class="eventListItemPosition" :title="item.address" @click="positioning(item)">
@@ -90,6 +84,7 @@

         <div class="pagination">
            <el-pagination
               class="ztzf-pagination"
               background
               v-model:current-page="params.current"
               v-model:page-size="params.size"
@@ -119,11 +114,17 @@
import cesiumOperation from '@/utils/cesium-tsa'
import CommonTitle from '@/components/CommonTitle.vue'
import { pxToRem } from '@/utils/rem'
import { useStore } from 'vuex'

const store = useStore()
// const eventTimeRange = computed(() => store.state.home.eventTimeRange)
const timeFormat = 'YYYY-MM-DD HH:mm:ss'
const today = dayjs().format(timeFormat)
const oneWeekAgo = dayjs().subtract(7, 'day').format(timeFormat)
const timeArr = ref([oneWeekAgo, today])
// const oneWeekAgo = dayjs().subtract(7, 'day').format(timeFormat)
// const timeArr = ref([oneWeekAgo, today])
const startOfWeek = dayjs().startOf('week').add(1, 'day').format(timeFormat)
const endOfWeek = dayjs().endOf('week').add(1, 'day').format(timeFormat)
const timeArr = ref([startOfWeek, endOfWeek])
const deviceList = ref([])

const total = ref(0)
@@ -137,6 +138,10 @@
   current: 1,
   size: 8,
})

const getSmallImg = (url) => {
   return url ? url.substring(0, url.lastIndexOf('.')) + '_small' + url.substring(url.lastIndexOf('.')) : ''
}

const isMore = ref(false)
const leftArrowFun = () => {
@@ -196,7 +201,6 @@
         }
      })
      statusList.value[0].active = true
      console.log(statusList.value)
   })
}

@@ -213,6 +217,8 @@
   const [start_date, end_date] = timeArr.value
   params.value.start_date = start_date
   params.value.end_date = end_date
   // 提交数据，更新聚合
   store.commit('setEventTimeRang', timeArr.value);
   // 重置
   getEventStatusNumFun()
   getEventList()
@@ -234,10 +240,28 @@
   }
   getEventPage(params.value, pageParams).then(res => {
      const resData = res.data.data
      list.value = resData?.records || []
      list.value = (resData?.records || [])
      total.value = resData.total
   })
}

const getDateRange = unit => {
  if (unit === 'today') {
    return [dayjs().format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')];
  }
  return [dayjs().startOf(unit).format('YYYY-MM-DD HH:mm:ss'), dayjs().endOf(unit).format('YYYY-MM-DD HH:mm:ss')];
};

// 监听事件时间范围变化
watch(() => store.state.home.eventTimeType, (newVal) => {
   timeArr.value = getDateRange(newVal);
   const [start_date, end_date] = getDateRange(newVal);
   params.value.start_date = start_date
   params.value.end_date = end_date
   getEventStatusNumFun()
   getEventList()
   getList()
}, { immediate: false,deep: true })

onMounted(() => {
   getDeviceList()
@@ -280,7 +304,7 @@

      .leftArrow {
         position: absolute;
         left: 0;
         left: -11px;
         top: 50%;
         transform: translateY(-50%);
         cursor: pointer;
@@ -450,13 +474,5 @@
   width: 100%;
   display: flex;
   justify-content: center;

   .el-pagination {
      --el-color-primary: #173da7;
      --el-pagination-button-bg-color: #131c35;
      --el-pagination-button-color: #ecf1ff;
      --el-disabled-bg-color: #131c35;
      --el-text-color-regular: #ecf1ff;
   }
}
</style>