From f19841d2742d9a5af07ff068e76e3ac296aa3193 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Sat, 09 Aug 2025 14:09:41 +0800
Subject: [PATCH] feat:地址生成二维码
---
src/views/tickets/ticket.vue | 44 +++++++++++++++++++++++++++++++++++++++++---
1 files changed, 41 insertions(+), 3 deletions(-)
diff --git a/src/views/tickets/ticket.vue b/src/views/tickets/ticket.vue
index a0424a3..6dabe98 100644
--- a/src/views/tickets/ticket.vue
+++ b/src/views/tickets/ticket.vue
@@ -638,7 +638,24 @@
</div>
</template>
<template v-else>
- <div class="media-title">地图标记事件点</div>
+ <div class="media-title">地图标记事件点
+ <el-popover v-if="currentDetail.status === 3"
+ popper-class="custom-qrcode-popover"
+ :width="120"
+ :visible="currentDetail.showQR && detailVisible"
+ placement="top"
+ title=""
+ trigger="click"
+
+ >
+ <template #reference>
+ <img @click.stop="handleQRCode(currentDetail)" class="QRCodeImg" src="@/assets/images/dataCenter/positionicon.png" alt="" title="事件导航" />
+ </template>
+ <div class="qrcode-content">
+ <CreateQRcode v-if="currentDetail.showQR && detailVisible" :latAndLon="currentDetail.location"></CreateQRcode>
+ </div>
+ </el-popover>
+ </div>
<div class="media-content">
<map-container v-if="detailVisible" ref="MapContainer"></map-container>
</div>
@@ -867,6 +884,7 @@
</template>
<script>
+
import { getSmallImg, getShowImg } from '@/utils/util';
import { ElMessageBox, ElLoading } from 'element-plus';
import { calculateDefaultRange } from '@/utils/util';
@@ -888,6 +906,7 @@
import { getAdcodeObj } from '@/utils/disposeData'
import elTooltipCopy from '@/components/ElTooltipCopy.vue'
import getBaseConfig from '@/buildConfig/config'
+import CreateQRcode from '@/components/CreateQRcode/CreateQRcode.vue'
const { envName } = getBaseConfig()
function regExp (label, name) {
var reg = new RegExp(label + '=([^&]*)(&|$)', 'g')
@@ -895,7 +914,7 @@
}
export default {
- components: { elTooltipCopy },
+ components: { elTooltipCopy,CreateQRcode },
name: 'TicketPage',
data() {
return {
@@ -1409,12 +1428,18 @@
this.currentDetail.processingDetail = this.currentDetail.content;
this.handleViewDetail(this.currentDetail);
+
// 如果使用地图组件，需要更新地图标记
this.$nextTick(() => {
if (this.$refs.MapContainer && this.currentDetail.location) {
this.$refs.MapContainer.initAddEntity('point', this.currentDetail.location);
}
});
+ },
+ async handleQRCode (val){
+ val.showQR = !val.showQR
+console.log('this.currentDetailvvvvv',val);
+
},
async loadAMapScripts() {
try {
@@ -2056,12 +2081,15 @@
this.currentDetail = {
...detailData,
// address: null,
+ showQR: false,
latAndLon: _.round(detailData.location[0], 6) + ',' + _.round(detailData.location[1], 6),
};
console.log('this.currentDetail', this.currentDetail);
this.detailVisible = true;
this.handleTypeChange(this.currentDetail.type)
+ console.log('this.currentDetail.location',this.currentDetail.location);
+
this.$nextTick(() => {
if (this.$refs.MapContainer && this.$refs.MapContainer.initAddEntity) {
this.$refs.MapContainer.initAddEntity('point', this.currentDetail.location);
@@ -2967,7 +2995,10 @@
};
</script>
<style lang="scss">
-.custom-dialog { max-height: 96vh; /* 80% 视口高度 */}
+.custom-dialog { max-height: 96vh; }
+.custom-qrcode-popover {
+min-width: 120px !important;
+}
</style>
<style lang="scss" scoped>
@@ -3413,6 +3444,13 @@
.media-title {
font-weight: bold;
margin-bottom: 5px;
+ display: flex;
+ align-items: center;
+ .QRCodeImg{
+ width: 18px;
+ height: 18px;
+ cursor: pointer;
+ }
}
.media-content {
--
Gitblit v1.9.3