From 4882be43ba3050549f866f5ee4027ef138c28b87 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 01 Dec 2025 20:08:51 +0800
Subject: [PATCH] feat:部署显示调整处理
---
src/components/map/components/mapSearchPopup.vue | 189 ++++++++++++++++++++++++++--------------------
1 files changed, 106 insertions(+), 83 deletions(-)
diff --git a/src/components/map/components/mapSearchPopup.vue b/src/components/map/components/mapSearchPopup.vue
index e1e5927..b546205 100644
--- a/src/components/map/components/mapSearchPopup.vue
+++ b/src/components/map/components/mapSearchPopup.vue
@@ -2,114 +2,137 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2023-03-02 09:39:32
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2023-04-01 14:43:39
+ * @LastEditTime: 2025-12-01 18:53:47
* @FilePath: \srs-police-affairs\src\components\map\components\mapSearchPopup.vue
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<template>
- <div>
- <div v-if="mapSearchPopup" class="popup-dom" id="mapSearchPopup">
- <div style="transform: translate(-50%, 0);">
- <!-- 样式自己修改 -->
- <div class="content" :class="{ 'scale-dom': scaleDomFlag }">
- <div class="url-code" v-if="mapSearchPopupData.showImg">
- <el-image style="width: 100px; height: 100px" :src="mapSearchPopupData.url"
- :preview-src-list="[mapSearchPopupData.url]">
- </el-image>
- </div>
- {{ mapSearchPopupData.name }}
+ <div>
+ <div v-if="mapSearchPopup" class="popup-dom" id="mapSearchPopup">
+ <div style="transform: translate(-50%, 0);">
+ <!-- 样式自己修改 -->
+ <div class="content" :class="{ 'scale-dom': scaleDomFlag }">
+ <div class="close-box">
+ <i class="el-icon-close" @click="closeCurPopup"></i>
+ </div>
+ <div class="url-code" v-if="mapSearchPopupData.showImg">
+ <el-image style="width: 100px; height: 100px" :src="mapSearchPopupData.url"
+ :preview-src-list="[mapSearchPopupData.url]">
+ </el-image>
+ </div>
+ {{ mapSearchPopupData.name }}
+ </div>
+ <div class="bottom-arrow"></div>
+ </div>
</div>
- <div class="bottom-arrow"></div>
- </div>
</div>
- </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
- name: 'mapSearchPopup',
+ name: 'mapSearchPopup',
- inject: ["getWidth", 'userInfo'],
+ inject: ["getWidth", 'userInfo'],
- data () {
- return {
- scaleDomFlag: false
+ data () {
+ return {
+ scaleDomFlag: false
+ }
+ },
+
+ computed: {
+ ...mapGetters([
+ 'mapSearchPopup',
+ 'mapSearchPopupData'
+ ])
+ },
+
+ mounted () {
+ if (this.getWidth() > 7000) {
+ this.scaleDomFlag = true
+ } else {
+ this.scaleDomFlag = false
+ }
+
+ },
+
+ methods: {
+ closeCurPopup () {
+ this.$EventBus.$emit("mapClearLayer", {
+ layerName: "searchLayer",
+ type: "VectorLayer",
+ })
+
+ this.$store.commit("SET_MAPSEARCHPOPUP", false)
+
+ this.$store.commit("SET_MAPSEARCHPOPUPDATA", {})
+ }
}
- },
-
- computed: {
- ...mapGetters([
- 'mapSearchPopup',
- 'mapSearchPopupData'
- ])
- },
-
- mounted () {
- if (this.getWidth() > 7000) {
- this.scaleDomFlag = true
- } else {
- this.scaleDomFlag = false
- }
-
- },
-
- methods: {
-
- }
}
</script>
<style lang="scss" scoped>
.popup-dom {
- position: fixed;
- top: -16px;
- left: 0;
- z-index: 1 !important;
+ position: fixed;
+ top: -16px;
+ left: 0;
+ z-index: 1 !important;
- &>.popup-box {
- position: relative;
- }
-
- .bottom-arrow {
- position: absolute;
- left: 50%;
- bottom: 0px;
- width: 0;
- height: 0;
- border: 10px solid transparent;
- border-top-color: $bg-color;
- transform: translate(-50%, 100%);
- }
-
- .scale-dom {
- transform: scale(3);
- transform-origin: left;
- }
-
- .content {
- padding: 0.5vh;
- width: 220px;
- background: $bg-color;
- border-radius: 4px;
- color: #fff;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
-
- .url-code {
- ::v-deep(img) {
- width: 64px;
- height: 64px;
- vertical-align: middle;
- }
+ &>.popup-box {
+ position: relative;
}
- }
+ .bottom-arrow {
+ position: absolute;
+ left: 50%;
+ bottom: 0px;
+ width: 0;
+ height: 0;
+ border: 10px solid transparent;
+ border-top-color: $bg-color;
+ transform: translate(-50%, 100%);
+ }
+
+ .scale-dom {
+ transform: scale(3);
+ transform-origin: left;
+ }
+
+ .content {
+ padding: 0.5vh;
+ width: 220px;
+ background: $bg-color;
+ border-radius: 4px;
+ color: #fff;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ .close-box {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+
+ ::v-deep(.el-icon-close) {
+ cursor: pointer;
+ }
+ }
+
+ .url-code {
+ ::v-deep(img) {
+ width: 64px;
+ height: 64px;
+ vertical-align: middle;
+ }
+ }
+
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3