From 3edba6f3a9538eda51c7d25f2263fecb3be64251 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E5=BB=B6=E7=A6=8F?= <> Date: Thu, 18 May 2023 14:06:30 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E7=81=AB=E7=84=B0?= =?UTF-8?q?=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mock/treeData.ts | 42 ++++++++++++++++++--------------- src/utils/player.ts | 2 +- src/views/base.component.ts | 31 ++++++++++++++++++++---- src/views/overview.component.ts | 33 ++++++++++++++++++++++++++ 4 files changed, 84 insertions(+), 24 deletions(-) diff --git a/src/mock/treeData.ts b/src/mock/treeData.ts index a3e6b32..bb0f3b1 100644 --- a/src/mock/treeData.ts +++ b/src/mock/treeData.ts @@ -12,27 +12,30 @@ export const treeData = [ id: Mock.mock("@id"), rate: 1, title: '顶层沸溢火', - point: '1', + point: 1, position: [ 11660769.28, 3692443.52, 67.69076171875 - ] + ], + content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', }, { id: Mock.mock("@id"), rate: 2, title: '顶层沸溢火', - point: '1', + point: 1, position: [ 11660674.56, 3692452.8000000003, 21.751074218750002 - ] + ], + content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', + mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗" }, { id: Mock.mock("@id"), rate: 4, title: '顶层沸溢火', - point: '3', + point:3, position: [[ 11660930.56, 3692587.52, @@ -45,33 +48,34 @@ export const treeData = [ 11660860.16, 3692580.8000000003, 21.94720703125 - ]] + ]], + content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', + mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗" }, { id: Mock.mock("@id"), rate: 3, title: '罐体火灾', - point: '5', + point: 1, position: [ 11661059.84, 3692514.24, 13.2171923828125 - ] + ], + content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', + mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗" }, { id: Mock.mock("@id"), rate: 4, title: '油罐车爆炸', - point: '5', + point: 1, position: [ - 11661043.200000001, - 3692599.68, - 9.2683056640625 - ] - }, { - id: Mock.mock("@id"), - rate: 2, - title: '顶层沸溢火', - point: '5', - }, + 11661045.76, + 3692601.6, + 2.3062506103515625 + ], + content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', + mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗" + } ] }, diff --git a/src/utils/player.ts b/src/utils/player.ts index 01bcdaf..52b5379 100644 --- a/src/utils/player.ts +++ b/src/utils/player.ts @@ -1,7 +1,7 @@ import MarkerOption from '@/models/marker.option.js' import PolygonOption from '@/models/polygon.option.js'; -import * as acapi from '../../public/ac.min.js' +import * as acapi from '../assets/ac.min.js' // import acapi from 'ac.min.js' export default class PlayerUtils{ public api:any; diff --git a/src/views/base.component.ts b/src/views/base.component.ts index 168e558..7414501 100644 --- a/src/views/base.component.ts +++ b/src/views/base.component.ts @@ -89,8 +89,13 @@ export default class BaseComponent extends Vue { public async addMarker(layer,trackCustom?){ if(!layer.ids.length){ + const options = layer.data.map((item,index)=>{ - return { + const option = {} as any + if(item.hasPop){ + option.popupURL = "http://192.168.1.20:8080/#/popup?"+new URLSearchParams(layer.popData) + } + return Object.assign(option,{ id:item.id, groupId:layer.value, coordinate:item.position, @@ -98,12 +103,15 @@ export default class BaseComponent extends Vue { displayMode:2, imagePath:layer.url || layer.urls[item.type], imageSize:[48,48], - // popupURL:"http://192.168.1.20:8080/#/popup?"+new URLSearchParams(item), + popupSize:[480,388], + popupOffset:[600,0], + autoHidePopupWindow:false, + // popupURL:, lineSize:[2,40], useTextAnimation: false, lineOffset:[24,0], autoHeight:true, - } + }) }) this.player.api.marker.add(options,(data)=>{ if(data.resultMessage==="OK"){ @@ -119,12 +127,22 @@ export default class BaseComponent extends Vue { }); } layer.ids = options.map(item=>item.id); + if(layer.showPop){ + this.player.api.marker.showAllPopupWindow() + } + } }) }else{ if(layer.selected){ + if(layer.showPop){ + this.player.api.marker.showAllPopupWindow() + } this.player.api.marker.show(layer.ids) }else{ + if(layer.showPop){ + this.player.api.marker.hideAllPopupWindow() + } this.player.api.marker.hide(layer.ids) } } @@ -147,7 +165,6 @@ export default class BaseComponent extends Vue { this.player.api.customObject.add(options,(data)=>{ if(data.resultMessage==="OK"){ if(needMarker){ - console.log(data) this.addMarker(layer,needMarker) }else{ layer.ids = options.map(item=>item.id) @@ -156,8 +173,14 @@ export default class BaseComponent extends Vue { }) }else{ if(layer.selected){ + if(needMarker){ + this.addMarker(layer,needMarker) + } this.player.api.customObject.show(layer.ids) }else{ + if(needMarker){ + this.addMarker(layer,needMarker) + } this.player.api.customObject.hide(layer.ids) } } diff --git a/src/views/overview.component.ts b/src/views/overview.component.ts index cb952e4..c5c12cd 100644 --- a/src/views/overview.component.ts +++ b/src/views/overview.component.ts @@ -39,6 +39,8 @@ export default class OverViewComponent extends BaseComponent { // 是否隐藏除地图外所有板块 public hideAllPanel = false; public viewRightData = {}; + + public viewLayer = {} as any; async created(){ // this.currentLayers = this.getCurrentLayers(); } @@ -176,6 +178,37 @@ export default class OverViewComponent extends BaseComponent { } //右侧详情点击事件 showDetail(item){ + if(!this.viewLayer[item.id]){ + const data = [] as any; + if(item.point>1){ + for(let i = 0;i