guangyin
/
hbt-training-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:新增火焰交互

wuyanfu
吴延福 2023-05-18 14:06:30 +08:00
parent 1316579757
commit 3edba6f3a9
4 changed files with 84 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/mock/treeData.ts
View File

@ -12,27 +12,30 @@ export const treeData = [
id: Mock.mock("@id"), id: Mock.mock("@id"),
rate: 1, rate: 1,
title: '顶层沸溢火', title: '顶层沸溢火',
point: '1', point: 1,
position: [ position: [
11660769.28, 11660769.28,
3692443.52, 3692443.52,
67.69076171875 67.69076171875
] ],
content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
}, { }, {
id: Mock.mock("@id"), id: Mock.mock("@id"),
rate: 2, rate: 2,
title: '顶层沸溢火', title: '顶层沸溢火',
point: '1', point: 1,
position: [ position: [
11660674.56, 11660674.56,
3692452.8000000003, 3692452.8000000003,
21.751074218750002 21.751074218750002
] ],
content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
}, { }, {
id: Mock.mock("@id"), id: Mock.mock("@id"),
rate: 4, rate: 4,
title: '顶层沸溢火', title: '顶层沸溢火',
point: '3', point:3,
position: [[ position: [[
11660930.56, 11660930.56,
3692587.52, 3692587.52,
@ -45,33 +48,34 @@ export const treeData = [
11660860.16, 11660860.16,
3692580.8000000003, 3692580.8000000003,
21.94720703125 21.94720703125
]] ]],
content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
}, { }, {
id: Mock.mock("@id"), id: Mock.mock("@id"),
rate: 3, rate: 3,
title: '罐体火灾', title: '罐体火灾',
point: '5', point: 1,
position: [ position: [
11661059.84, 11661059.84,
3692514.24, 3692514.24,
13.2171923828125 13.2171923828125
] ],
content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
}, { }, {
id: Mock.mock("@id"), id: Mock.mock("@id"),
rate: 4, rate: 4,
title: '油罐车爆炸', title: '油罐车爆炸',
point: '5', point: 1,
position: [ position: [
11661043.200000001, 11661045.76,
3692599.68, 3692601.6,
9.2683056640625 2.3062506103515625
] ],
}, { content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
id: Mock.mock("@id"), mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
rate: 2, }
title: '顶层沸溢火',
point: '5',
},
] ]
}, },

2
src/utils/player.ts
View File

@ -1,7 +1,7 @@
import MarkerOption from '@/models/marker.option.js' import MarkerOption from '@/models/marker.option.js'
import PolygonOption from '@/models/polygon.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' // import acapi from 'ac.min.js'
export default class PlayerUtils{ export default class PlayerUtils{
public api:any; public api:any;

31
src/views/base.component.ts
View File

@ -89,8 +89,13 @@ export default class BaseComponent extends Vue {
public async addMarker(layer,trackCustom?){ public async addMarker(layer,trackCustom?){
if(!layer.ids.length){ if(!layer.ids.length){
const options = layer.data.map((item,index)=>{ 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, id:item.id,
groupId:layer.value, groupId:layer.value,
coordinate:item.position, coordinate:item.position,
@ -98,12 +103,15 @@ export default class BaseComponent extends Vue {
displayMode:2, displayMode:2,
imagePath:layer.url || layer.urls[item.type], imagePath:layer.url || layer.urls[item.type],
imageSize:[48,48], 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], lineSize:[2,40],
useTextAnimation: false, useTextAnimation: false,
lineOffset:[24,0], lineOffset:[24,0],
autoHeight:true, autoHeight:true,
} })
}) })
this.player.api.marker.add(options,(data)=>{ this.player.api.marker.add(options,(data)=>{
if(data.resultMessage==="OK"){ if(data.resultMessage==="OK"){
@ -119,12 +127,22 @@ export default class BaseComponent extends Vue {
}); });
} }
layer.ids = options.map(item=>item.id); layer.ids = options.map(item=>item.id);
if(layer.showPop){
this.player.api.marker.showAllPopupWindow()
}
} }
}) })
}else{ }else{
if(layer.selected){ if(layer.selected){
if(layer.showPop){
this.player.api.marker.showAllPopupWindow()
}
this.player.api.marker.show(layer.ids) this.player.api.marker.show(layer.ids)
}else{ }else{
if(layer.showPop){
this.player.api.marker.hideAllPopupWindow()
}
this.player.api.marker.hide(layer.ids) this.player.api.marker.hide(layer.ids)
} }
} }
@ -147,7 +165,6 @@ export default class BaseComponent extends Vue {
this.player.api.customObject.add(options,(data)=>{ this.player.api.customObject.add(options,(data)=>{
if(data.resultMessage==="OK"){ if(data.resultMessage==="OK"){
if(needMarker){ if(needMarker){
console.log(data)
this.addMarker(layer,needMarker) this.addMarker(layer,needMarker)
}else{ }else{
layer.ids = options.map(item=>item.id) layer.ids = options.map(item=>item.id)
@ -156,8 +173,14 @@ export default class BaseComponent extends Vue {
}) })
}else{ }else{
if(layer.selected){ if(layer.selected){
if(needMarker){
this.addMarker(layer,needMarker)
}
this.player.api.customObject.show(layer.ids) this.player.api.customObject.show(layer.ids)
}else{ }else{
if(needMarker){
this.addMarker(layer,needMarker)
}
this.player.api.customObject.hide(layer.ids) this.player.api.customObject.hide(layer.ids)
} }
} }

33
src/views/overview.component.ts
View File

@ -39,6 +39,8 @@ export default class OverViewComponent extends BaseComponent {
// 是否隐藏除地图外所有板块 // 是否隐藏除地图外所有板块
public hideAllPanel = false; public hideAllPanel = false;
public viewRightData = {}; public viewRightData = {};
public viewLayer = {} as any;
async created(){ async created(){
// this.currentLayers = this.getCurrentLayers(); // this.currentLayers = this.getCurrentLayers();
} }
@ -176,6 +178,37 @@ export default class OverViewComponent extends BaseComponent {
} }
//右侧详情点击事件 //右侧详情点击事件
showDetail(item){ showDetail(item){
if(!this.viewLayer[item.id]){
const data = [] as any;
if(item.point>1){
for(let i = 0;i<item.point;i++){
data.push({
id:item.id+'_'+i,
position:item.position[i],
hasPop:i===1,
})
}
}else{
data.push({
id:item.id,
position:item.position,
hasPop:true
})
}
this.viewLayer[item.id] = {
type:"moveMarker",
assetPath:"/JC_CustomAssets/ParticleLibrary/Exhibition/火/火焰_10",
value:"fire",
popData:item,
showPop:true,
scale:[3,3,3],
urls:[],
ids:[],
data,
}
}
this.addCustom(this.viewLayer[item.id],true);
console.log('右侧详情点击事件',item) console.log('右侧详情点击事件',item)
} }
mounted() { mounted() {