From 61e6956be147e1e84e7104f16dd47e9f87f20dfd Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Fri, 18 Apr 2025 10:57:32 +0800
Subject: [PATCH] feat: 控制台显示一些信息
---
src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue | 245 ++++++++++++++++++++++++++++++++++++++----------
1 files changed, 194 insertions(+), 51 deletions(-)
diff --git a/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue b/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue
index 005f263..9d4161f 100644
--- a/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue
+++ b/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue
@@ -1,9 +1,9 @@
<template>
<div class="event-overviewdetail-right" :class="{ isMore }">
- <CommonTitle title="工单列表" />
+ <CommonTitle title="事件概况" :style="{width: isMore?pxToRem(820):pxToRem(404)}" />
<div class="content">
- <img class="leftArrow" :src="isMore ? rightArrowImg : leftArrowImg" @click="leftArrowFun" alt="" />
+ <img class="leftArrow" :class="isMore?'rightArrow':''" :src="isMore ? rightArrowImg : leftArrowImg" @click="leftArrowFun" alt="" />
<el-date-picker
class="ztzf-date-picker"
@@ -50,12 +50,12 @@
<img class="statusItemImg" :src="item.img" alt="" />
<div class="statusItemInfo">
<div class="statusItemName">{{ item.name }}</div>
- <div class="statusItemNum">{{ item.num || 0 }}</div>
+ <div class="statusItemNum" :style="{ color:item.color }">{{ item.num || 0 }}</div>
</div>
</div>
</div>
- <el-checkbox-group v-model="params.event_keys" @change="getList">
+ <el-checkbox-group v-show="isMore" v-model="params.event_keys" @change="getList">
<el-checkbox v-for="item in eventList" :value="item.status" :key="item.dictKey">
<template #default>
<span class="eventListItemCheckboxName">{{ item.name }}</span>
@@ -68,28 +68,24 @@
<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=""
+ @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>
<div class="pagination">
<el-pagination
+ class="ztzf-pagination"
background
v-model:current-page="params.current"
v-model:page-size="params.size"
@@ -98,6 +94,25 @@
@change="pageChange"
/>
</div>
+ </div>
+ </div>
+ <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>
+ <div class="content">
+ <img :src="clickImgSrc" alt="">
+ </div>
+ <div class="card">
+ <div v-for="(item,index) in imageList">
+ <div class="time-top" :class="index===selectedImgIndex?'active':''" @click="clickWeekTime(item,index)">{{ item.create_time_str }}</div>
+ <div class="time-point">
+ <img v-if="index===selectedImgIndex" src="@/assets/images/home/useEventOperate/point-active.png" alt="">
+ <img v-else src="@/assets/images/home/useEventOperate/point.png" alt="">
+ </div>
+ <div class="time-bottom">{{ item.create_time }}</div>
+ </div>
+ <div class="time-line"></div>
</div>
</div>
</template>
@@ -115,15 +130,21 @@
import dayjs from 'dayjs'
import { selectDevicePage } from '@/api/home/machineNest'
import { getMultipleDictionary } from '@/api/system/dictbiz'
-import { getEvenNum, getEventPage, getEventStatusNum } from '@/api/home/event'
+import { getEvenNum, getEventPage, getEventStatusNum, findImgHistory } from '@/api/home/event'
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)
@@ -138,11 +159,17 @@
size: 8,
})
+const getSmallImg = (url) => {
+ return url ? url.substring(0, url.lastIndexOf('.')) + '_small' + url.substring(url.lastIndexOf('.')) : ''
+}
+
const isMore = ref(false)
const leftArrowFun = () => {
isMore.value = !isMore.value
params.value.size = isMore.value ? 16 : 8
params.value.current = 1
+ // 下半部分隐藏 右侧隐藏
+ store.commit('setHideBottomIcon', !isMore.value)
getList()
}
@@ -168,20 +195,21 @@
})
}
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);
}
// 事件状态+数量
const statusList = ref([
- { name: '全部状态', img: status0Img, id: undefined,few: true },
- { name: '待审核', img: status1Img, id: 2 },
- { name: '待处理', img: status2Img, id: 0, few: true },
- { name: '处理中', img: status3Img, id: 3, few: true },
- { name: '已完成', img: status4Img, id: 4, few: true },
- { name: '待分拨', img: status5Img, id: 1 },
+ { name: '全部状态', img: status0Img, id: undefined,few: true, color: '#FFD509' },
+ { name: '待审核', img: status1Img, id: 2, color: '#8CFEA7' },
+ { name: '待处理', img: status2Img, id: 0, few: true, color: '#FF7411' },
+ { name: '处理中', img: status3Img, id: 3, few: true, color: '#FFC398' },
+ { name: '已完成', img: status4Img, id: 4, few: true, color: '#AFD9FB' },
+ { name: '待分拨', img: status5Img, id: 1, color: '#11C4FF' },
])
const getEventStatusNumFun = () => {
@@ -196,7 +224,6 @@
}
})
statusList.value[0].active = true
- console.log(statusList.value)
})
}
@@ -213,6 +240,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 +263,49 @@
}
getEventPage(params.value, pageParams).then(res => {
const resData = res.data.data
- list.value = resData?.records || []
+ list.value = (resData?.records || [])
total.value = resData.total
})
}
+const isShowBigImg = ref(false)
+const imageList = ref([]);
+const clickImgSrc = ref('');
+const selectedImgIndex = ref(0);
+// 点击图片放大 显示详细信息
+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;
+ })
+ positioning(item);
+}
+// 点击周期
+const clickWeekTime = (item,index) => {
+ clickImgSrc.value = item.url
+ selectedImgIndex.value = index
+}
+
+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()
@@ -258,30 +326,44 @@
height: 922px;
width: 405px;
font-size: 18px;
+ z-index: 10;
&.isMore {
- width: 807px;
+ width: 808px;
.content {
width: 792px;
+ padding-left: 44px;
}
}
.content {
width: 390px;
height: 877px;
- background: linear-gradient(270deg, #1f3e7a 0%, rgba(31, 62, 122, 0.35) 79%, rgba(31, 62, 122, 0) 100%);
+ background: linear-gradient(
+ 270deg,
+ rgba(31, 62, 122, 0) 0%,
+ rgba(31, 62, 122, 0.35) 21%,
+ #1f3e7a 100%);
display: flex;
justify-content: space-between;
align-content: start;
flex-wrap: wrap;
- padding: 7px 15px 0 11px;
- gap: 10px;
+ padding: 7px 13px 0 11px;
+ gap: 16px;
.leftArrow {
position: absolute;
- left: 0;
+ left: -11px;
top: 50%;
+ transform: translateY(-50%);
+ cursor: pointer;
+ }
+
+ .rightArrow {
+ position: absolute;
+ top: 50%;
+ left: 30px;
transform: translateY(-50%);
cursor: pointer;
}
@@ -289,35 +371,31 @@
.statusList {
width: 100%;
display: flex;
+ justify-content: space-between;
.statusItem {
- width: 95px;
+ // width: 95px;
height: 44px;
display: flex;
flex: 1;
justify-content: center;
position: relative;
cursor: pointer;
+ // margin-right: 4px;
&.active {
- background: linear-gradient(
- 180deg,
- rgba(19, 80, 141, 0) 0%,
- rgba(22, 56, 91, 0.48) 48%,
- #053462 91%,
- #259dff 91%,
- #259dff 98%
- );
+ background: linear-gradient( 180deg, rgba(19,80,141,0) 0%, rgba(22,56,91,0.48) 48%, #053462 98%, #259DFF 98%, #259DFF 98%);
}
.statusItemImg {
- width: 35px;
- height: 35px;
+ width: 34px;
+ height: 34px;
+ margin-right: 1px;
}
.statusItemInfo {
.statusItemName {
- width: 59px;
+ // width: 59px;
height: 17px;
font-family: Segoe UI, Segoe UI;
font-weight: 400;
@@ -327,6 +405,7 @@
text-align: left;
font-style: normal;
text-transform: none;
+ margin-bottom: 4px;
}
.statusItemNum {
@@ -377,13 +456,14 @@
width: 100%;
display: flex;
flex-wrap: wrap;
- justify-content: space-between;
- gap: 20px 0;
+ // justify-content: space-between;
+ gap: 20px 10px;
.eventListItem {
width: 175px;
height: 140px;
position: relative;
+ cursor: pointer;
.eventListItemImg {
width: 174px;
@@ -450,13 +530,76 @@
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;
+}
+.image-list {
+ border: 1px solid red;
+ position: absolute;
+ 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;
+ 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: absolute;
+ text-align: right;
+ right: 12px;
+ // top: 12px;
+ img {
+ width: 10px;
+ height: 10px;
+ cursor: pointer;
+ }
+ }
+ .content {
+ img {
+ width: 100%;
+ height: 100%;
+ border-radius: 10px 10px 10px 10px;
+ }
+ }
+ .card {
+ 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: absolute;
+ bottom: 0px;
+ width: 100%;
+ .time-top {
+ width: 50px;
+ height: 30px;
+ line-height: 30px;
+ text-align: center;
+ color: #ffffff;
+ background: linear-gradient( 180deg, rgba(13,30,70,0.72) 0%, #142E6B 100%);
+ border: 1px solid #0054D3;
+ cursor: pointer;
+ }
+ .active {
+ background: linear-gradient( 180deg, rgba(13,48,131,0.72) 0%, #023DC8 100%);
+ border: 1px solid;
+ border-image: linear-gradient(180deg, rgba(0, 84, 211, 1), rgba(146, 186, 245, 1)) 1 1;
+ }
+ .time-point {
+ text-align: center;
+ img {
+ width: 8px;
+ height: 12px;
+ }
+ }
+ .time-line {
+ position: absolute;
+ background: linear-gradient( 82deg, rgba(23,40,79,0) 0%, #576D9F 17%, #576D9F 86%, rgba(23,40,79,0) 100%);
+ height: 2px;
+ top: 38px;
+ width: 100%;
+ }
}
}
</style>
--
Gitblit v1.9.3