From a7e6761ba0cfccdf33ed552eb2d3b783c8e4ab4a Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 16 Apr 2025 20:49:12 +0800
Subject: [PATCH] feat:事件弹窗显示调整
---
src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue | 56 ++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 36 insertions(+), 20 deletions(-)
diff --git a/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue b/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue
index 005f263..edfc854 100644
--- a/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue
+++ b/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>
--
Gitblit v1.9.3