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"),
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:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
}
]
},

2
src/utils/player.ts
View File

@ -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;

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

@ -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)
}
}

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

@ -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<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)
}
mounted() {