From c832bf2e80ac465e71b7a1c1f7a59d4252030989 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Tue, 05 Aug 2025 17:33:08 +0800
Subject: [PATCH] feat:事件工单滚动条
---
src/hooks/components/EventPopUpBox.vue | 264 ++++++++++++++++++++++++++++------------------------
1 files changed, 142 insertions(+), 122 deletions(-)
diff --git a/src/hooks/components/EventPopUpBox.vue b/src/hooks/components/EventPopUpBox.vue
index 1ebcc68..a0a084f 100644
--- a/src/hooks/components/EventPopUpBox.vue
+++ b/src/hooks/components/EventPopUpBox.vue
@@ -1,143 +1,163 @@
<template>
- <div class="mapPopUpBox">
- <div class="title">
- <span>{{ info.event_name }}</span>
-<el-icon class="header-close" @click.stop="props.detailClick"><Warning /></el-icon>
- <el-icon class="header-close" @click.stop="props.removeLabel">
- <Close />
- </el-icon>
- </div>
- <div class="content">
- <div class="medium">
- <el-image
- class="eventImage"
- :src="getSmallImg(infoList?.link)"
- :preview-src-list="[getSmallImg(infoList?.link)]"
- fit="cover"
- preview-teleported
- ></el-image>
- </div>
+ <div class="mapPopUpBox">
+ <div class="title">
+ <span>{{ info.event_name }}</span>
+ <el-icon class="header-close" @click.stop="props.detailClick"><Warning /></el-icon>
+ <el-icon class="header-close" @click.stop="props.removeLabel">
+ <Close />
+ </el-icon>
+ </div>
+ <div class="content">
+ <div class="medium">
+ <img
+ class="quanjing"
+ @click="clickpanorama(infoList)"
+ v-if="infoList?.resultType === 5"
+ :src="infoList?.link"
+ alt=""
+ />
+ <el-image
+ v-else
+ class="eventImage"
+ :src="getSmallImg(infoList?.link)"
+ :preview-src-list="[getSmallImg(infoList?.link)]"
+ fit="cover"
+ preview-teleported
+ ></el-image>
+ </div>
- <div class="details">
- <div class="label">时间：</div>
- <div class="value point">
- {{
- infoList?.create_time?.slice(5, 16).replace('-', '/') ||
- infoList?.createTime?.slice(5, 16).replace('-', '/')
- }}
- </div>
- <div class="label">地点：</div>
- <div class="value">
- {{ _.round(infoList?.metadata?.shootPosition?.lng, 3) }}，{{
- _.round(infoList?.metadata?.shootPosition?.lat, 3)
- }}
- </div>
- </div>
- </div>
- </div>
+ <div class="details">
+ <div class="label">时间：</div>
+ <div class="value point">
+ {{
+ infoList?.create_time?.slice(5, 16).replace('-', '/') ||
+ infoList?.createTime?.slice(5, 16).replace('-', '/')
+ }}
+ </div>
+ <div class="label">地点：</div>
+ <div class="value">
+ {{ _.round(infoList?.metadata?.shootPosition?.lng, 3) }}，{{
+ _.round(infoList?.metadata?.shootPosition?.lat, 3)
+ }}
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script setup>
-import { ElImage, ElIcon } from 'element-plus'
-import { Close,Warning } from '@element-plus/icons-vue'
-import _ from 'lodash'
+import EventBus from '@/utils/eventBus';
+import { ElImage, ElIcon } from 'element-plus';
+import { Close, Warning } from '@element-plus/icons-vue';
+import _ from 'lodash';
import { getShowImg, getSmallImg } from '@/utils/util';
-const props = defineProps(['data', 'removeLabel','detailClick'])
-const loading = ref(true)
-
+const props = defineProps(['data', 'removeLabel', 'detailClick']);
+const loading = ref(true);
+import PanoramaPopup from '@/components/PanoramaPopup/PanoramaPopup.vue'; //全景
+const emit = defineEmits(['update:panoramaParamsShow', 'update:panoramaParamsUrl']);
const info = ref({
- event_name: '',
- status: 1,
- url: '1',
- longitude: '',
- latitude: '',
- create_time: '04/01 12:41',
-})
-const infoList = props.data
-onMounted(async () => {})
+ event_name: '',
+ status: 1,
+ url: '1',
+ longitude: '',
+ latitude: '',
+ create_time: '04/01 12:41',
+});
+const infoList = props.data;
+const clickpanorama = val => {
+ // 通过事件总线发送全景参数
+ EventBus.emit('open-panorama', {
+ show: true,
+ url: val.link,
+ });
+ // 保留原有事件触发，确保兼容性
+ emit('update:panoramaParamsShow', true);
+ emit('update:panoramaParamsUrl', val.link);
+};
+onMounted(async () => {});
</script>
<style scoped lang="scss">
.mapPopUpBox {
- width: 271px;
- height: 153px;
- // background: url('@/assets/images/dataCenter/datamap/popUpBox.png') no-repeat center / 100% 100%;
- border-radius: 20px;
- background-color: #fff;
+ width: 271px;
+ height: 153px;
+ // background: url('@/assets/images/dataCenter/datamap/popUpBox.png') no-repeat center / 100% 100%;
+ border-radius: 20px;
+ background-color: #fff;
- padding: 13px 13px 1px 13px;
- pointer-events: all;
+ padding: 13px 13px 1px 13px;
+ pointer-events: all;
- .title {
- font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
- font-weight: 400;
- font-size: 18px;
- line-height: 16px;
- background: linear-gradient(180deg, #a8e5fb 0%, #e6f8ff 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- -moz-background-clip: text;
- -moz-text-fill-color: transparent;
- background-clip: text;
- text-fill-color: transparent;
- margin-bottom: 10px;
- display: flex;
- align-items: center;
- justify-content: end;
+ .title {
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 16px;
+ background: linear-gradient(180deg, #a8e5fb 0%, #e6f8ff 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ -moz-background-clip: text;
+ -moz-text-fill-color: transparent;
+ background-clip: text;
+ text-fill-color: transparent;
+ margin-bottom: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: end;
- .header-close {
- width: 20px;
- height: 100%;
- line-height: 100%;
- display: flex;
- align-items: center;
- color: black;
- pointer-events: all;
- cursor: pointer;
- }
- }
+ .header-close {
+ width: 20px;
+ height: 100%;
+ line-height: 100%;
+ display: flex;
+ align-items: center;
+ color: black;
+ pointer-events: all;
+ cursor: pointer;
+ }
+ }
- .content {
- height: 102px;
- width: 240px;
- display: flex;
- align-items: center;
+ .content {
+ height: 102px;
+ width: 240px;
+ display: flex;
+ align-items: center;
- .medium {
- height: 102px;
- width: 120px;
- margin-right: 10px;
+ .medium {
+ height: 102px;
+ width: 120px;
+ margin-right: 10px;
- > img,
- video,
- div {
- width: 100%;
- height: 100%;
- }
- }
+ > img,
+ video,
+ div {
+ width: 100%;
+ height: 100%;
+ }
+ }
- .details {
- .label {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: black;
- line-height: 16px;
- margin-bottom: 2px;
- }
+ .details {
+ .label {
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: 400;
+ font-size: 14px;
+ color: black;
+ line-height: 16px;
+ margin-bottom: 2px;
+ }
- .value {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: black;
- line-height: 16px;
- margin-bottom: 2px;
- }
+ .value {
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: 400;
+ font-size: 14px;
+ color: black;
+ line-height: 16px;
+ margin-bottom: 2px;
+ }
- .point {
- margin-bottom: 14px;
- }
- }
- }
+ .point {
+ margin-bottom: 14px;
+ }
+ }
+ }
}
</style>
--
Gitblit v1.9.3