From 5ae5dc7224eabd60425cc3a06f7a98721ea21f69 Mon Sep 17 00:00:00 2001 From: Esacpe <1113279529@qq.com> Date: Tue, 23 Dec 2025 18:58:47 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 24 +- src/components/GdMap/index.vue | 5 + src/components/GdMap/indexww.vue | 6 + src/components/GdMap/mapUtil.js | 48 +- .../IntelligentControl/DeploymentArea/xzqh.js | 7 + src/views/home/index copy.vue | 446 ++++++++++++++++++ src/views/home/index.vue | 44 +- 7 files changed, 548 insertions(+), 32 deletions(-) create mode 100644 src/views/home/index copy.vue diff --git a/src/App.vue b/src/App.vue index d787d7d..817c4c5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -152,19 +152,22 @@ v-deep .el-loading-mask { } .popupCustomBox{ position: relative; - padding: 4px 10px; - box-sizing: border-box; - background: #06254282; + background: #2a88e082; color: #fff; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); .popupCustomTitle_title{ + padding: 4px; + box-sizing: border-box; font-size: 12px; - line-height: 24px; text-transform: none; margin-bottom: 0; border-bottom: 1px dashed #ececec; margin-bottom: 2px; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: nowrap; } &::after{ content: ''; @@ -176,7 +179,18 @@ v-deep .el-loading-mask { height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; - border-top: 10px solid #06254282; + border-top: 10px solid #2a88e082; + } + .popupCustomTitle_li{ + font-size: 12px; + line-height: 22px; + text-transform: none; + margin-bottom: 0; + span{ + display: inline-block; + width: 45px; + text-align: center; + } } } diff --git a/src/components/GdMap/index.vue b/src/components/GdMap/index.vue index 0eb27de..cd05015 100644 --- a/src/components/GdMap/index.vue +++ b/src/components/GdMap/index.vue @@ -154,6 +154,10 @@ onMounted(() => { emitter.on("showSquire", (obj) => { mapUtil.value.zdySquire(obj); }); + // 展示气泡框 + emitter.on("makerPopup", (obj) => { + mapUtil.value.makerPopup(obj); + }); // 绘制图形 - 回显区域 emitter.on("drawShape", (res) => { @@ -288,6 +292,7 @@ onUnmounted(() => { emitter.off("showPoint"); emitter.off("deletePointArea"); emitter.off("deletePointAreaOne"); + emitter.off("makerPopup"); emitter.off("drawShape"); emitter.off("echoPlane"); emitter.off("removeEara"); diff --git a/src/components/GdMap/indexww.vue b/src/components/GdMap/indexww.vue index 0349009..144bfec 100644 --- a/src/components/GdMap/indexww.vue +++ b/src/components/GdMap/indexww.vue @@ -167,6 +167,11 @@ onMounted(() => { mapUtil.value.showPoint(obj); }); + // 展示气泡框 + emitter.on("makerPopup", (obj) => { + mapUtil.value.makerPopup(obj); + }); + // 清除覆盖物 emitter.on("deletePointArea", (res) => { // 只清除与当前地图相关的覆盖物 @@ -325,6 +330,7 @@ onUnmounted(() => { emitter.off("setMapCenter"); emitter.off("addPointArea"); emitter.off("showPoint"); + emitter.off("makerPopup"); emitter.off("deletePointArea"); emitter.off("deletePointAreaOne"); emitter.off("drawShape"); diff --git a/src/components/GdMap/mapUtil.js b/src/components/GdMap/mapUtil.js index f073670..146241b 100644 --- a/src/components/GdMap/mapUtil.js +++ b/src/components/GdMap/mapUtil.js @@ -85,7 +85,7 @@ export function MapUtil(map) { el.style.width = size ? size : "25px"; if (flag.includes('jczMap_')) el.style.width = '45px'; if (showTitle) _that.makerShowTitle(item, [item.jd, item.wd], flag, '', offset) //展示标题 - if (flag == 'hm') _that.makerPopup(item, flag, 'Custom') //展示气泡框 + // if (flag == 'hm') _that.makerPopup({data:item,flag:'hm_pop',type:'Custom'}) //展示气泡框 // 确保坐标格式正确，使用对象格式传递坐标 const marker = map.Marker(el, { lng: item.jd, lat: item.wd }, { anchor: 'bottom', offset: [0, 0] }) el.addEventListener("click", () => { @@ -144,34 +144,35 @@ export function MapUtil(map) { } // 展示气泡框 - MapUtil.prototype.makerPopup = (item,flag,style = 'Dark')=>{ + MapUtil.prototype.makerPopup = (val)=>{ + + let { data,flag,type = 'Dark'} = val // Dark Light Custom let marker; - let flagPop = flag+'_pop' - if(!_that._self[flagPop]) _that._self[flagPop] = []; - if(style == 'Dark' || style == 'Light') { - let list = zdyContent(flag,item);// 默认的样式 - marker = map.createPopup([item.jd,item.wd],{ + if(!_that._self[flag]) _that._self[flag] = []; + if(type == 'Dark' || type == 'Light') { + let list = zdyContent(flag,data);// 默认的样式 + marker = map.createPopup([data.jd,data.wd],{ style:style, // 气泡框样式: data:list, - title:item.ssbm, + title:data.ssbm, closeButton:false, anchor:'bottom', pixelOffset:[0,-50] }) }else { - marker = map.createPopup([item.jd,item.wd],{ + marker = map.createPopup([data.jd,data.wd],{ style:'Custom', // // 自定义样式 attrs:{ class:'popupCustom' }, - container: zdyContentHtml(flag,item), + container: zdyContentHtml(flag,data), closeButton:false, anchor:'bottom', pixelOffset:[0,-30] }) } - _that._self[flagPop].push(marker) + _that._self[flag].push(marker) } // 弹窗自定义默认内容 function zdyContent(flag,item){ @@ -187,16 +188,25 @@ export function MapUtil(map) { } // 弹窗自定义标签内容 function zdyContentHtml(flag,item){ + const list = [ + { jb: "一级",sl:'5',ypl:'100%' }, + { jb: "一级",sl:'5',ypl:'100%' }, + { jb: "一级",sl:'5',ypl:'100%' }, + { jb: "一级",sl:'5',ypl:'100%' } + ]; let html = '' switch (flag) { - case 'hm': + case 'hm_pop': html = `
-
${item.ssbm}
-
林安码线索数量：${item.lamsx}
-
布控预警数量：${item.bkyj}
-
红色预警数量：${item.hsyj}
-
信息采集数量：${item.xxcjsl}
+
+ ${item.ssbm} + 今日警情${item.jqsl || 0} +
+
` break; @@ -797,7 +807,7 @@ export function MapUtil(map) { // 移除边界 MapUtil.prototype.createBoundarys = (res) => { - let { data, color, fillColor, borderColor, label, text, labelPosition } = res + let { data, color, fillColor, borderColor, label, text, labelPosition, outLineWidth } = res if (!data) return false; // 使用传入的颜色参数，如果没有则使用默认值 const fillColorValue = fillColor || 'rgba(27, 205, 211, 0.3)'; @@ -807,7 +817,7 @@ export function MapUtil(map) { const polygon = map.createPolygon(data, { color: fillColorValue, outLineColor: borderColorValue, - outLineWidth: 1, + outLineWidth: outLineWidth || 1, highlightColor: highlightColorValue, type: 'solid', labelOption: { diff --git a/src/views/backOfficeSystem/IntelligentControl/DeploymentArea/xzqh.js b/src/views/backOfficeSystem/IntelligentControl/DeploymentArea/xzqh.js index 4ed1902..d3e74b1 100644 --- a/src/views/backOfficeSystem/IntelligentControl/DeploymentArea/xzqh.js +++ b/src/views/backOfficeSystem/IntelligentControl/DeploymentArea/xzqh.js @@ -76655,12 +76655,14 @@ export const bm = { export const centralPoint = [ { name: '墨脱县', + ssbmdm:'540423000000', point: [ 95.33050808900407, 29.322011545645807 ] }, { name: '巴宜区', + ssbmdm:'540402000000', point: [ 94.36040092147607, 29.637028970765996 @@ -76668,30 +76670,35 @@ export const centralPoint = [ }, { name: '波密县', + ssbmdm:'540424000000', point: [ 95.7692249914358, 29.85943760031867 ] }, { name: '察隅县', + ssbmdm:'540425000000', point: [ 97.46698612723947, 28.661228694163327 ] }, { name: '工布江达县', + ssbmdm:'540421000000', point: [ 93.24660931130188, 29.88459424127838 ] }, { name: '朗县', + ssbmdm:'540426000000', point: [ 93.07449497318652, 29.045416229209337 ] }, { name: '米林县', + ssbmdm:'540422000000', point: [ 94.21305189935441, 29.21583429482142 diff --git a/src/views/home/index copy.vue b/src/views/home/index copy.vue new file mode 100644 index 0000000..7a772be --- /dev/null +++ b/src/views/home/index copy.vue @@ -0,0 +1,446 @@ + + + + + diff --git a/src/views/home/index.vue b/src/views/home/index.vue index e848e2a..b3d16cc 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -56,8 +56,7 @@
-
+
@@ -65,6 +64,14 @@
+
+ + + + + + +
@@ -142,15 +149,13 @@ const changeXzqh = (val, trg) => { // 先移除已有的边界 emitter.emit('removeBj') if (trg) { - console.log("多个"); // 如果传入的是多个区域数据（二维数组） const features = val.map((area, index) => ({ geometry: { type: "Polygon", coordinates: [area] // 确保格式正确 }, - properties: { - }, + properties: { }, type: "Feature" })) // 循环为每个区域创建单独的多边形，这样可以设置不同的样式 @@ -162,6 +167,7 @@ const changeXzqh = (val, trg) => { }, color: 'rgba(209, 112, 65, 0.8)', fillColor: 'rgba(255, 255, 255,0)', + outLineWidth: 2, }) }) } else { @@ -222,24 +228,46 @@ const getDepId = () => { changeXzqh(data, true) break; } - } } +const indexNum = ref(0) //当前展示的气泡框 +const showNotification = ref(false) //是否自动展开提示 +const allDep = ref([]) //所有部门 +const handleOpenNotification = () => { + showNotification.value = !showNotification.value; + emitter.emit('deletePointArea','hm_pop') + if(showNotification.value){ + // 主动展开提示，默认展示所有 + allDep.value.forEach(item => { + emitter.emit("makerPopup", { data:item, flag: "hm_pop",type:'Custom'}); + }) + } +} const makerCenter = () => { const dw = require("@/assets/point/dingwei.png") qcckGet({},'/mosty-gsxt/tbYjxx/selectSsbm').then(res=>{ emitter.emit('deletePointArea','hm') - emitter.emit('deletePointArea','hm_pop') + if(!showNotification.value) emitter.emit('deletePointArea','hm_pop') let list = res || []; list.forEach(item => { - let obj = centralPoint.find(i => i.name == item.ssbm); + let obj = centralPoint.find(i => i.name == item.ssbm || i.ssbmdm == item.ssbmdm); if(obj){ item.jd = obj.point[0]; item.wd = obj.point[1]; } }) + allDep.value = list; emitter.emit("addPointArea", { coords:list, icon: dw, flag: "hm", size: '14px', showTitle: false, offset: [0, -25] }); + if(!showNotification.value){ + setTimeout(() => { + // 没有主动展开提示，默认循环一个一个展示 + if(list.length > 0){ + emitter.emit("makerPopup", { data:list[indexNum.value], flag: "hm_pop",type:'Custom'}); + indexNum.value == list.length ? indexNum.value = 0 : indexNum.value++ + } + }, 1000); + } }) } //播放音频