<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-03-02 09:39:32
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @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="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>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
|
export default {
|
name: 'mapSearchPopup',
|
|
inject: ["getWidth", 'userInfo'],
|
|
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", {})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.popup-dom {
|
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;
|
|
.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>
|
