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

Compare commits

base: guangyin:f9eca566da2f9aab7c6c559bf4a5e396d33f7066
Branches Tags
guangyin:master
guangyin:guangyin
guangyin:wuyanfu
..
compare: guangyin:193d453f22a38eced2c7bdd3a3015823719cc786
Branches Tags
guangyin:master
guangyin:guangyin
guangyin:wuyanfu

No commits in common. "f9eca566da2f9aab7c6c559bf4a5e396d33f7066" and "193d453f22a38eced2c7bdd3a3015823719cc786" have entirely different histories.
f9eca566da ... 193d453f22

10 changed files with 418 additions and 623 deletions
Show Stats Expand all files Collapse all files

BIN
src/assets/img/view/r1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 111 KiB

BIN
src/assets/img/view/r2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 90 KiB

3
src/components/view/left/viewLeft.component.html
View File

@ -48,8 +48,7 @@
<i class="el-icon-right"></i> <i class="el-icon-right"></i>
<span>{{item.to}}</span> <span>{{item.to}}</span>
</div> </div>
<img v-if="i === 0" src="~@/assets/img/view/r1.png" alt=""> <img src="~@/assets/img/view/view.png" alt="">
<img v-else src="~@/assets/img/view/r2.png" alt="">
</div> </div>
</div> </div>
</div> </div>

923
src/mock/treeData.ts
View File

@ -15,96 +15,6 @@ export const treeData = [
children: [ { children: [ {
id: Mock.mock("@id"), id: Mock.mock("@id"),
label: '田径场', label: '田径场',
color:"#FF5959",
area:[[[
11660849.92,
3692453.12,
2.306259765625
],[
11660814.08,
3692467.52,
2.3062451171875002
],[
11660798.72,
3692496.96,
2.306240234375
],[
11660800,
3692518.08,
2.306240234375
],[
11660808.96,
3692535.04,
2.306259765625
],[
11660837.120000001,
3692554.88,
2.3062255859375003
],[
11660954.88,
3692570.56,
2.3062451171875002
],[
11660988.16,
3692556.8000000003,
2.3062158203125
],[
11661004.8,
3692533.44,
2.306240234375
],[
11661004.8,
3692502.08,
2.3062109375
],[
11660994.56,
3692481.2800000003,
2.3062255859375003
]],[[
11660843.52,
3692531.84,
2.3384033203125
],[
11660954.88,
3692546.24,
2.345048828125
],[
11660971.52,
3692539.84,
2.3062158203125
],[
11660981.76,
3692521.6,
2.4300390625
],[
11660977.92,
3692504.3200000003,
2.3416943359375
],[
11660961.28,
3692490.56,
2.34521484375
],[
11660849.92,
3692476.16,
2.3412060546875
],[
11660830.72,
3692484.16,
2.3898291015625
],[
11660823.040000001,
3692500.8000000003,
2.345234375
],[
11660826.88,
3692519.68,
2.3445166015625
],[
11660837.120000001,
3692529.6,
2.3916162109375
]]],
data: { data: {
content: '1. 提供训练场地：田径场为消防员提供一个广阔、平整的训练场地，帮助他们进行各种体能训练，如跑步、跳高、跳远等。这种训练可以增强消防员的身体素质，提高他们应对火灾、抢险救援等紧急情况时的反应速度和行动能力。\n' + content: '1. 提供训练场地：田径场为消防员提供一个广阔、平整的训练场地，帮助他们进行各种体能训练，如跑步、跳高、跳远等。这种训练可以增强消防员的身体素质，提高他们应对火灾、抢险救援等紧急情况时的反应速度和行动能力。\n' +
'\n' + '\n' +
@ -137,52 +47,6 @@ export const treeData = [
{ {
id: Mock.mock("@id"), id: Mock.mock("@id"),
label: '球类训练场', label: '球类训练场',
color:"#80ED30",
area:[[
11660843.52,
3692531.84,
2.3384033203125
],[
11660954.88,
3692546.24,
2.345048828125
],[
11660971.52,
3692539.84,
2.3062158203125
],[
11660981.76,
3692521.6,
2.4300390625
],[
11660977.92,
3692504.3200000003,
2.3416943359375
],[
11660961.28,
3692490.56,
2.34521484375
],[
11660849.92,
3692476.16,
2.3412060546875
],[
11660830.72,
3692484.16,
2.3898291015625
],[
11660823.040000001,
3692500.8000000003,
2.345234375
],[
11660826.88,
3692519.68,
2.3445166015625
],[
11660837.120000001,
3692529.6,
2.3916162109375
]],
data: { data: {
content: '主要用于培训和提高消防队员们的团队协作、沟通和应急处理能力。在球类训练场上，消防队员们通过参与篮球、足球、排球等球类运动，锻炼他们的身体素质，增强他们在灾难现场的快速反应和应对能力。同时，球类训练场也有助于提高消防队员之间的默契配合，强化他们的团队精神，使他们在执行任务时能够更加高效地进行紧急救援。', content: '主要用于培训和提高消防队员们的团队协作、沟通和应急处理能力。在球类训练场上，消防队员们通过参与篮球、足球、排球等球类运动，锻炼他们的身体素质，增强他们在灾难现场的快速反应和应对能力。同时，球类训练场也有助于提高消防队员之间的默契配合，强化他们的团队精神，使他们在执行任务时能够更加高效地进行紧急救援。',
dataList: [ dataList: [
@ -204,116 +68,104 @@ export const treeData = [
}, },
children: [] children: []
}, },
// { {
// id: Mock.mock("@id"), id: Mock.mock("@id"),
// label: '器械训练设施', label: '器械训练设施',
// data: { data: {
// content: '消防训练基地的器械训练设施在消防员培训过程中起到非常重要的作用。这些设施可以帮助消防员在安全的环境中学习和练习不同的消防技能，以便在实际工作中更有效、安全地进行救援和灭火。下面是一些器械训练设施的主要作用：\n' + content: '消防训练基地的器械训练设施在消防员培训过程中起到非常重要的作用。这些设施可以帮助消防员在安全的环境中学习和练习不同的消防技能，以便在实际工作中更有效、安全地进行救援和灭火。下面是一些器械训练设施的主要作用：\n' +
// '\n' + '\n' +
// '1. 提高消防员的实际操作能力：通过实际操作各种设备，消防员可以熟悉和掌握各种消防器材的使用方法，提高在火场或救援现场的应对能力。\n' + '1. 提高消防员的实际操作能力：通过实际操作各种设备，消防员可以熟悉和掌握各种消防器材的使用方法，提高在火场或救援现场的应对能力。\n' +
// '\n' + '\n' +
// '2. 增强消防员的心理素质：实际应对火灾和救援任务需要消防员冷静、果断和勇敢。通过模拟实际情况下的训练，消防员可以在相对安全的环境中提高应对紧急情况的心理素质。\n' + '2. 增强消防员的心理素质：实际应对火灾和救援任务需要消防员冷静、果断和勇敢。通过模拟实际情况下的训练，消防员可以在相对安全的环境中提高应对紧急情况的心理素质。\n' +
// '\n' + '\n' +
// '3. 提高团队协作能力：火场救援和灭火通常需要多人协同完成。器械训练设施可以帮助消防员磨练团队协作能力，提高整个团队的执行力和工作效率。\n' + '3. 提高团队协作能力：火场救援和灭火通常需要多人协同完成。器械训练设施可以帮助消防员磨练团队协作能力，提高整个团队的执行力和工作效率。\n' +
// '\n' + '\n' +
// '4. 提高应对复杂场景的能力：器械训练设施通常包含不同类型和场景的模拟环境，如高层建筑火灾、地下空间火灾等。这些训练可以帮助消防员适应各种复杂环境，提高在实际火灾现场的灵活性和应变能力。\n' + '4. 提高应对复杂场景的能力：器械训练设施通常包含不同类型和场景的模拟环境，如高层建筑火灾、地下空间火灾等。这些训练可以帮助消防员适应各种复杂环境，提高在实际火灾现场的灵活性和应变能力。\n' +
// '\n' + '\n' +
// '5. 培训安全性：消防训练基地的器械训练设施在设计和使用过程中，会充分考虑到消防员的安全，通过设施和教官的指导，降低训练中的安全风险。\n' + '5. 培训安全性：消防训练基地的器械训练设施在设计和使用过程中，会充分考虑到消防员的安全，通过设施和教官的指导，降低训练中的安全风险。\n' +
// '\n' + '\n' +
// '总之，消防训练基地的器械训练设施对于培养高素质、专业的消防员具有重要作用。通过这些设施的训练，消防员可以全面提高自己在火场救援和灭火任务中的综合能力，确保在实际工作中能够有效、安全地执行任务。', '总之，消防训练基地的器械训练设施对于培养高素质、专业的消防员具有重要作用。通过这些设施的训练，消防员可以全面提高自己在火场救援和灭火任务中的综合能力，确保在实际工作中能够有效、安全地执行任务。',
// dataList: [ dataList: [
// { {
// id: Mock.mock("@id"), id: Mock.mock("@id"),
// rate: 1, rate: 1,
// title: '器械训练设施', title: '器械训练设施',
// point: 1, point: 1,
// position: [ position: [
// 11660785.92, 11660785.92,
// 3692445.44, 3692445.44,
// 23.0313525390625 23.0313525390625
// ], ],
// img:img1, img:img1,
// content: '消防训练基地的器械训练设施在消防员培训过程中起到非常重要的作用。这些设施可以帮助消防员在安全的环境中学习和练习不同的消防技能，以便在实际工作中更有效、安全地进行救援和灭火。', content: '消防训练基地的器械训练设施在消防员培训过程中起到非常重要的作用。这些设施可以帮助消防员在安全的环境中学习和练习不同的消防技能，以便在实际工作中更有效、安全地进行救援和灭火。',
// mainPoint:"1. 提高消防员的实际操作能力：通过实际操作各种设备，消防员可以熟悉和掌握各种消防器材的使用方法，提高在火场或救援现场的应对能力。\n" + mainPoint:"1. 提高消防员的实际操作能力：通过实际操作各种设备，消防员可以熟悉和掌握各种消防器材的使用方法，提高在火场或救援现场的应对能力。\n" +
// "\n" + "\n" +
// "2. 增强消防员的心理素质：实际应对火灾和救援任务需要消防员冷静、果断和勇敢。通过模拟实际情况下的训练，消防员可以在相对安全的环境中提高应对紧急情况的心理素质。\n" + "2. 增强消防员的心理素质：实际应对火灾和救援任务需要消防员冷静、果断和勇敢。通过模拟实际情况下的训练，消防员可以在相对安全的环境中提高应对紧急情况的心理素质。\n" +
// "\n" + "\n" +
// "3. 提高团队协作能力：火场救援和灭火通常需要多人协同完成。器械训练设施可以帮助消防员磨练团队协作能力，提高整个团队的执行力和工作效率。\n" + "3. 提高团队协作能力：火场救援和灭火通常需要多人协同完成。器械训练设施可以帮助消防员磨练团队协作能力，提高整个团队的执行力和工作效率。\n" +
// "\n" + "\n" +
// "4. 提高应对复杂场景的能力：器械训练设施通常包含不同类型和场景的模拟环境，如高层建筑火灾、地下空间火灾等。这些训练可以帮助消防员适应各种复杂环境，提高在实际火灾现场的灵活性和应变能力。\n" + "4. 提高应对复杂场景的能力：器械训练设施通常包含不同类型和场景的模拟环境，如高层建筑火灾、地下空间火灾等。这些训练可以帮助消防员适应各种复杂环境，提高在实际火灾现场的灵活性和应变能力。\n" +
// "\n" + "\n" +
// "5. 培训安全性：消防训练基地的器械训练设施在设计和使用过程中，会充分考虑到消防员的安全，通过设施和教官的指导，降低训练中的安全风险。" "5. 培训安全性：消防训练基地的器械训练设施在设计和使用过程中，会充分考虑到消防员的安全，通过设施和教官的指导，降低训练中的安全风险。"
// } }
// ] ]
// }, },
// children: [] children: []
// } }]
]
}, { }, {
id: Mock.mock("@id"), id: Mock.mock("@id"),
label: '基础技能', label: '基础技能',
children: [ children: [
// { {
// id: Mock.mock("@id"), id: Mock.mock("@id"),
// label: '心理训练设施', label: '心理训练设施',
// data: { data: {
// content: '消防训练基地的心理训练设施主要对消防员进行心理素质的培训和提升', content: '消防训练基地的心理训练设施主要对消防员进行心理素质的培训和提升',
// dataList: [ dataList: [
// { {
// id: Mock.mock("@id"), id: Mock.mock("@id"),
// rate: 1, rate: 1,
// title: '心理训练设施', title: '心理训练设施',
// point: 1, point: 1,
// position: [ position: [
// 11660785.92, 11660785.92,
// 3692445.44, 3692445.44,
// 23.0313525390625 23.0313525390625
// ], ],
// img:img1, img:img1,
// content: '消防训练基地的心理训练设施主要对消防员进行心理素质的培训和提升', content: '消防训练基地的心理训练设施主要对消防员进行心理素质的培训和提升',
// mainPoint:"消防训练基地的心理训练设施主要对消防员进行心理素质的培训和提升。这类设施的作用主要有以下几个方面：\n" + mainPoint:"消防训练基地的心理训练设施主要对消防员进行心理素质的培训和提升。这类设施的作用主要有以下几个方面：\n" +
// "\n" + "\n" +
// "1. 增强心理素质：心理训练设施通过模拟各种紧急情况，帮助消防员提高心理承受能力，增强心理抗压能力。这有助于他们在实际应对火灾等突发事件时保持冷静，高效完成任务。\n" + "1. 增强心理素质：心理训练设施通过模拟各种紧急情况，帮助消防员提高心理承受能力，增强心理抗压能力。这有助于他们在实际应对火灾等突发事件时保持冷静，高效完成任务。\n" +
// "\n" + "\n" +
// "2. 提高团队协作：心理训练设施可以通过模拟团队任务来提高消防员之间的团队协作能力。通过彼此协作以解决问题，消防员们可以学会更好地支持同事，加强团队精神。\n" + "2. 提高团队协作：心理训练设施可以通过模拟团队任务来提高消防员之间的团队协作能力。通过彼此协作以解决问题，消防员们可以学会更好地支持同事，加强团队精神。\n" +
// "\n" + "\n" +
// "3. 应对焦虑和恐惧：紧急情况往往伴随着极大的焦虑和恐惧。心理训练设施可以帮助消防员学会如何在压力较大的情况下面对及克服这些负面情绪，使他们在执行任务时能够保持专注。\n" + "3. 应对焦虑和恐惧：紧急情况往往伴随着极大的焦虑和恐惧。心理训练设施可以帮助消防员学会如何在压力较大的情况下面对及克服这些负面情绪，使他们在执行任务时能够保持专注。\n" +
// "\n" + "\n" +
// "4. 增强沟通能力：消防员在执行任务时需要与不同的人沟通，包括受灾民众、其他救援人员等。心理训练设施通过模拟各种沟通场景，帮助消防员提高沟通和应变能力，确保信息准确传递。\n" + "4. 增强沟通能力：消防员在执行任务时需要与不同的人沟通，包括受灾民众、其他救援人员等。心理训练设施通过模拟各种沟通场景，帮助消防员提高沟通和应变能力，确保信息准确传递。\n" +
// "\n" + "\n" +
// "5. 提高心理治愈能力：心理训练设施还可以通过辅导及疗愈课程，帮助消防员在经历创伤性事件后进行心理疗愈。这有助于他们更快地从心理创伤中恢复，维护良好的心理健康。" "5. 提高心理治愈能力：心理训练设施还可以通过辅导及疗愈课程，帮助消防员在经历创伤性事件后进行心理疗愈。这有助于他们更快地从心理创伤中恢复，维护良好的心理健康。"
// } }
// ] ]
// }, },
// children: [] children: []
// }, },
{ {
id: Mock.mock("@id"), id: Mock.mock("@id"),
label: '烟热训练设施', label: '烟热训练设施',
camera:[
11660880.450625,
3692424.8075,
10.847578,
0,
-40.95977,
163.245209,
2
],
data: { data: {
content: '烟热训练设施是一种专门为消防员提供实战训练和技能提升的模拟环境。这个设施模拟了火灾现场产生的烟雾和高温环境，以帮助消防员了解火灾现场的实际情况，提高他们的应对能力。', content: '烟热训练设施是一种专门为消防员提供实战训练和技能提升的模拟环境。这个设施模拟了火灾现场产生的烟雾和高温环境，以帮助消防员了解火灾现场的实际情况，提高他们的应对能力。',
dataList: [ dataList: [
{ {
id: Mock.mock("@id"), id: Mock.mock("@id"),
rate: 1, rate: 1,
title: '密闭空间烟热', title: '顶层沸溢火',
point: 1, point: 1,
position: [ position: [
11660878.08, 11660785.92,
3692424.3200000003, 3692445.44,
6.9294152832031255 23.0313525390625
], ],
// assetPath:"/JC_CustomAssets/ParticleLibrary/Exhibition/火/火焰_3",
scale:[0.1,0.1,0.1],
img:img1, img:img1,
content: '烟热训练设施是一种专门为消防员提供实战训练和技能提升的模拟环境。这个设施模拟了火灾现场产生的烟雾和高温环境，以帮助消防员了解火灾现场的实际情况，提高他们的应对能力。', content: '烟热训练设施是一种专门为消防员提供实战训练和技能提升的模拟环境。这个设施模拟了火灾现场产生的烟雾和高温环境，以帮助消防员了解火灾现场的实际情况，提高他们的应对能力。',
mainPoint:'烟热训练设施是一种专门为消防员提供实战训练和技能提升的模拟环境。这个设施模拟了火灾现场产生的烟雾和高温环境，以帮助消防员了解火灾现场的实际情况，提高他们的应对能力。\n' + mainPoint:'烟热训练设施是一种专门为消防员提供实战训练和技能提升的模拟环境。这个设施模拟了火灾现场产生的烟雾和高温环境，以帮助消防员了解火灾现场的实际情况，提高他们的应对能力。\n' +
@ -334,73 +186,62 @@ export const treeData = [
}, },
children: [] children: []
}, },
// { {
// id: Mock.mock("@id"), id: Mock.mock("@id"),
// label: '燃烧训练设施', label: '燃烧训练设施',
// data: { data: {
// content: '燃烧训练设施是消防员和救援人员进行实战演练的重要场所，旨在通过模拟各种火灾场景和环境，提高人员的应对能力和处置火灾的技巧。', content: '燃烧训练设施是消防员和救援人员进行实战演练的重要场所，旨在通过模拟各种火灾场景和环境，提高人员的应对能力和处置火灾的技巧。',
// dataList: [ dataList: [
// { {
// id: Mock.mock("@id"), id: Mock.mock("@id"),
// rate: 1, rate: 1,
// title: '燃烧训练设施', title: '燃烧训练设施',
// point: 1, point: 1,
// position: [ position: [
// 11660785.92, 11660785.92,
// 3692445.44, 3692445.44,
// 23.0313525390625 23.0313525390625
// ], ],
// img:img1, img:img1,
// content: '燃烧训练设施是消防员和救援人员进行实战演练的重要场所，旨在通过模拟各种火灾场景和环境，提高人员的应对能力和处置火灾的技巧。', content: '燃烧训练设施是消防员和救援人员进行实战演练的重要场所，旨在通过模拟各种火灾场景和环境，提高人员的应对能力和处置火灾的技巧。',
// mainPoint:'燃烧训练设施是消防员和救援人员进行实战演练的重要场所，旨在通过模拟各种火灾场景和环境，提高人员的应对能力和处置火灾的技巧。燃烧训练设施通常包括以下几个方面：\n' + mainPoint:'燃烧训练设施是消防员和救援人员进行实战演练的重要场所，旨在通过模拟各种火灾场景和环境，提高人员的应对能力和处置火灾的技巧。燃烧训练设施通常包括以下几个方面：\n' +
// '\n' + '\n' +
// '1. 实战模拟场景：通过模拟各种真实火灾场景（如住宅、工厂、商场、隧道等），让消防员和救援人员在实际环境中训练灭火、搜救、疏散等技能。\n' + '1. 实战模拟场景：通过模拟各种真实火灾场景（如住宅、工厂、商场、隧道等），让消防员和救援人员在实际环境中训练灭火、搜救、疏散等技能。\n' +
// '\n' + '\n' +
// '2. 火源控制：燃烧训练设施通常采用可控火源，如燃气火焰、油火等，以确保训练过程中人员的安全，并可以根据需要调整火势和火场。\n' + '2. 火源控制：燃烧训练设施通常采用可控火源，如燃气火焰、油火等，以确保训练过程中人员的安全，并可以根据需要调整火势和火场。\n' +
// '\n' + '\n' +
// '3. 烟雾模拟：通过产生大量烟雾，模拟火场中的复杂环境，提高救援人员在低能见度条件下的作战能力。\n' + '3. 烟雾模拟：通过产生大量烟雾，模拟火场中的复杂环境，提高救援人员在低能见度条件下的作战能力。\n' +
// '\n' + '\n' +
// '4. 模拟高空作业：设有具备高空环境的训练塔楼，让消防员和救援人员在高空作业时能熟练掌握施救技巧和使用高空设备。\n' + '4. 模拟高空作业：设有具备高空环境的训练塔楼，让消防员和救援人员在高空作业时能熟练掌握施救技巧和使用高空设备。\n' +
// '\n' + '\n' +
// '5. 模拟水域救援：水域救援训练区模拟各种水下场景，使消防员能熟练进行水上及水下抢险救援。\n' + '5. 模拟水域救援：水域救援训练区模拟各种水下场景，使消防员能熟练进行水上及水下抢险救援。\n' +
// '\n' + '\n' +
// '6. 特种救援训练区：提供模拟工业场所、矿井、化工厂等特殊环境的消防训练，以提高救援人员在复杂条件下的作战能力。\n' + '6. 特种救援训练区：提供模拟工业场所、矿井、化工厂等特殊环境的消防训练，以提高救援人员在复杂条件下的作战能力。\n' +
// '\n' + '\n' +
// '7. 教学设施：一般燃烧训练设施还会配备多媒体教学室、理论培训教室等辅助教学设施，以便结合实际操作进行全面的消防知识培训。\n' + '7. 教学设施：一般燃烧训练设施还会配备多媒体教学室、理论培训教室等辅助教学设施，以便结合实际操作进行全面的消防知识培训。\n' +
// '\n' + '\n' +
// '燃烧训练设施的目标是培养消防员和救援人员面对各种火灾场景时的灵活应变、临危不乱的心理素质，以及正确地使用消防设备和器材进行有效救援。' '燃烧训练设施的目标是培养消防员和救援人员面对各种火灾场景时的灵活应变、临危不乱的心理素质，以及正确地使用消防设备和器材进行有效救援。'
// } }
// ] ]
// }, },
// children: [] children: []
// }, },
{ {
id: Mock.mock("@id"), id: Mock.mock("@id"),
label: '火幕墙训练设施', label: '火幕墙训练设施',
camera:[
11660808.93,
3692487.569082,
19.493777,
0,
-18.412529,
-177.451691,
2,
],
data: { data: {
content: '火幕墙训练设施是一种模拟建筑物火灾现场的特殊设备，通常提供多层楼结构，具有真实火场环境的烟雾、火苗和火势。它能帮助消防队员训练攀爬、疏散、搜救等任务，同时提高他们在火场环境中快速、准确判断火势传播、开展灭火作战的能力。', content: '火幕墙训练设施是一种模拟建筑物火灾现场的特殊设备，通常提供多层楼结构，具有真实火场环境的烟雾、火苗和火势。它能帮助消防队员训练攀爬、疏散、搜救等任务，同时提高他们在火场环境中快速、准确判断火势传播、开展灭火作战的能力。',
dataList: [ dataList: [
{ {
id: Mock.mock("@id"), id: Mock.mock("@id"),
rate: 1, rate: 1,
title: '火幕墙起火', title: '顶层沸溢火',
point: 1, point: 1,
position: [ position: [
11660765.44, 11660785.92,
3692493.7600000002, 3692445.44,
6.30624755859375 23.0313525390625
], ],
rotation:[-90,0,0],
assetPath:"/JC_CustomAssets/ParticleLibrary/Exhibition/火/火焰_3",
img:img1, img:img1,
content: '火幕墙训练设施是一种模拟建筑物火灾现场的特殊设备，通常提供多层楼结构，具有真实火场环境的烟雾、火苗和火势。它能帮助消防队员训练攀爬、疏散、搜救等任务，同时提高他们在火场环境中快速、准确判断火势传播、开展灭火作战的能力。', content: '火幕墙训练设施是一种模拟建筑物火灾现场的特殊设备，通常提供多层楼结构，具有真实火场环境的烟雾、火苗和火势。它能帮助消防队员训练攀爬、疏散、搜救等任务，同时提高他们在火场环境中快速、准确判断火势传播、开展灭火作战的能力。',
mainPoint:'火幕墙训练设施是一种模拟建筑物火灾现场的特殊设备，通常提供多层楼结构，具有真实火场环境的烟雾、火苗和火势。它能帮助消防队员训练攀爬、疏散、搜救等任务，同时提高他们在火场环境中快速、准确判断火势传播、开展灭火作战的能力。\n' + mainPoint:'火幕墙训练设施是一种模拟建筑物火灾现场的特殊设备，通常提供多层楼结构，具有真实火场环境的烟雾、火苗和火势。它能帮助消防队员训练攀爬、疏散、搜救等任务，同时提高他们在火场环境中快速、准确判断火势传播、开展灭火作战的能力。\n' +
@ -1431,260 +1272,258 @@ export const treeData = [
} }
] ]
}, }, {
// { label: '战勤保障训练设施',
// label: '战勤保障训练设施', type: 'safeguard',
// type: 'safeguard', children: [
// children: [ {
// { label: '消防车辆装备维修训练设施',
// label: '消防车辆装备维修训练设施', data: {
// data: { content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
// content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', dataList: [
// dataList: [ {
// { 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 ],
// ], img:img1,
// img:img1, content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
// content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
// mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗" }, {
// }, { 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 ],
// ], img:img2,
// img:img2, content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
// content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
// 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, 21.947177734375
// 21.947177734375 ],[
// ],[ 11660902.4,
// 11660902.4, 3692583.68,
// 3692583.68, 21.947197265625
// 21.947197265625 ],[
// ],[ 11660860.16,
// 11660860.16, 3692580.8000000003,
// 3692580.8000000003, 21.94720703125
// 21.94720703125 ]],
// ]], img:img1,
// img:img1, content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
// content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
// mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗" }, {
// }, { id: Mock.mock("@id"),
// id: Mock.mock("@id"), rate: 3,
// rate: 3, title: '罐体火灾',
// title: '罐体火灾', point: '1',
// point: '1', position: [
// position: [ 11661059.84,
// 11661059.84, 3692514.24,
// 3692514.24, 13.2171923828125
// 13.2171923828125 ],
// ], img:img2,
// img:img2, content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
// content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
// mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗" }, {
// }, { id: Mock.mock("@id"),
// id: Mock.mock("@id"), rate: 4,
// rate: 4, title: '油罐车爆炸',
// title: '油罐车爆炸', point: '1',
// point: '1', position: [
// position: [ 11661043.200000001,
// 11661043.200000001, 3692599.68,
// 3692599.68, 9.2683056640625
// 9.2683056640625 ],
// ], img:img1,
// img:img1, content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
// content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
// mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗" },
// }, ]
// ] },
// }, children: []
// children: [] },
// }, {
// { label: '驾驶员教学训练设施',
// label: '驾驶员教学训练设施', data: {
// data: { content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
// content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', dataList: [
// dataList: [ {
// { 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 ],
// ], img:img1,
// img:img1, content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
// content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
// mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗" }, {
// }, { 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 ],
// ], img:img2,
// img:img2, content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
// content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
// 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, 21.947177734375
// 21.947177734375 ],[
// ],[ 11660902.4,
// 11660902.4, 3692583.68,
// 3692583.68, 21.947197265625
// 21.947197265625 ],[
// ],[ 11660860.16,
// 11660860.16, 3692580.8000000003,
// 3692580.8000000003, 21.94720703125
// 21.94720703125 ]],
// ]], img:img1,
// img:img1, content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
// content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
// mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗" }, {
// }, { id: Mock.mock("@id"),
// id: Mock.mock("@id"), rate: 3,
// rate: 3, title: '罐体火灾',
// title: '罐体火灾', point: '1',
// point: '1', position: [
// position: [ 11661059.84,
// 11661059.84, 3692514.24,
// 3692514.24, 13.2171923828125
// 13.2171923828125 ],
// ], img:img2,
// img:img2, content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
// content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
// mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗" }, {
// }, { id: Mock.mock("@id"),
// id: Mock.mock("@id"), rate: 4,
// rate: 4, title: '油罐车爆炸',
// title: '油罐车爆炸', point: '1',
// point: '1', position: [
// position: [ 11661043.200000001,
// 11661043.200000001, 3692599.68,
// 3692599.68, 9.2683056640625
// 9.2683056640625 ],
// ], img:img1,
// img:img1, content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
// content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
// mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗" },
// }, ]
// ] },
// }, children: []
// children: [] },
// }, {
// { label: '工程机械训练设施',
// label: '工程机械训练设施', data: {
// data: { content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
// content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', dataList: [
// dataList: [ {
// { 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 ],
// ], img:img1,
// img:img1, content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
// content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
// mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗" }, {
// }, { 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 ],
// ], img:img2,
// img:img2, content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
// content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
// 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, 21.947177734375
// 21.947177734375 ],[
// ],[ 11660902.4,
// 11660902.4, 3692583.68,
// 3692583.68, 21.947197265625
// 21.947197265625 ],[
// ],[ 11660860.16,
// 11660860.16, 3692580.8000000003,
// 3692580.8000000003, 21.94720703125
// 21.94720703125 ]],
// ]], img:img1,
// img:img1, content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
// content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
// mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗" }, {
// }, { id: Mock.mock("@id"),
// id: Mock.mock("@id"), rate: 3,
// rate: 3, title: '罐体火灾',
// title: '罐体火灾', point: '1',
// point: '1', position: [
// position: [ 11661059.84,
// 11661059.84, 3692514.24,
// 3692514.24, 13.2171923828125
// 13.2171923828125 ],
// ], img:img2,
// img:img2, content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
// content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
// mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗" }, {
// }, { id: Mock.mock("@id"),
// id: Mock.mock("@id"), rate: 4,
// rate: 4, title: '油罐车爆炸',
// title: '油罐车爆炸', point: '1',
// point: '1', position: [
// position: [ 11661043.200000001,
// 11661043.200000001, 3692599.68,
// 3692599.68, 9.2683056640625
// 9.2683056640625 ],
// ], img:img1,
// img:img1, content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
// content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
// mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗" },
// }, ]
// ] },
// }, children: []
// children: [] },
// }, ]
// ] }]
// }
]

3
src/popup/pop.component.vue
View File

@ -56,12 +56,11 @@
background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.7) 100%); background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.7) 100%);
padding: 30px; padding: 30px;
font-size: 14px; font-size: 14px;
overflow: auto;
position: relative; position: relative;
.border{ .border{
width: 8px; width: 8px;
height: 8px; height: 8px;
position: fixed; position: absolute;
border-left: 1px solid #FFF; border-left: 1px solid #FFF;
border-top: 1px solid #FFF; border-top: 1px solid #FFF;
&.l-t{ &.l-t{

2
src/utils/player.ts
View File

@ -17,7 +17,7 @@ export default class PlayerUtils{
}, },
ui:{ ui:{
startupInfo:false, startupInfo:false,
mainUI:true mainUI:false
}, },
events: { events: {

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

@ -12,27 +12,6 @@ import CloseService from '@/service/close.service';
import * as turf from "@turf/turf" import * as turf from "@turf/turf"
import path from '@/mock/path'; import path from '@/mock/path';
enum COLOR{
// 围栏
BOUNDS="#F669FF",
// 实控线
REALLINE="#00C8FF",
// 规划线
PLANLINE="#FFA900",
// 安全线
SAFELINE="#80ED30",
// 四色图-绿
GREEN="#80ED30",
// 四色图-蓝
BLUE="#7DAEFF",
// 四色图-黄
YELLOW="#FFA900",
// 四色图-红
RED="#FF5959"
}
@Component({ @Component({
template, template,
components: { components: {
@ -55,8 +34,6 @@ export default class BaseComponent extends Vue {
public currentWanning:any = null; public currentWanning:any = null;
public currentEvent:any = null; public currentEvent:any = null;
public currentAreaId:any = null;
// dataList // dataList
public dataList = {} as any; public dataList = {} as any;
// service // service
@ -101,23 +78,6 @@ export default class BaseComponent extends Vue {
) )
} }
public addArea(data){
if(this.currentAreaId){
this.player.api.polygon3d.delete(this.currentAreaId);
}
this.player.api.polygon3d.add({
id:data.id,
coordinates:data.area,
style:1,
height:20,
color:data.color,
generateTop:true,
},(res)=>{
this.currentAreaId = data.id;
this.player.api.polygon3d.focus(data.id,40)
})
}
// 添加电子围栏 // 安全线 // 实控线 // 规划线 // 添加电子围栏 // 安全线 // 实控线 // 规划线
public async toggleArea(layer){ public async toggleArea(layer){
if(!layer.ids.length){ if(!layer.ids.length){
@ -153,7 +113,7 @@ export default class BaseComponent extends Vue {
const options = layer.data.map((item,index)=>{ const options = layer.data.map((item,index)=>{
const option = {} as any const option = {} as any
if(item.hasPop){ if(item.hasPop){
option.popupURL = "http://192.168.1.20:8081/#/popup?"+new URLSearchParams(layer.popData) option.popupURL = "http://192.168.1.20:8080/#/popup?"+new URLSearchParams(layer.popData)
} }
return Object.assign(option,{ return Object.assign(option,{
id:item.id, id:item.id,
@ -187,18 +147,24 @@ export default class BaseComponent extends Vue {
}); });
} }
layer.ids = options.map(item=>item.id); layer.ids = options.map(item=>item.id);
this.player.api.marker.showPopupWindow(layer.ids) if(layer.showPop){
this.player.api.marker.focus(layer.ids,50,2) this.player.api.marker.showPopupWindow(layer.ids)
this.player.api.marker.focus(layer.ids,50,2)
}
} }
}) })
}else{ }else{
if(layer.selected){ if(layer.selected){
this.player.api.marker.showPopupWindow(layer.ids) if(layer.showPop){
this.player.api.marker.focus(layer.ids,50,2) this.player.api.marker.showPopupWindow(layer.ids)
this.player.api.marker.focus(layer.ids,50,2)
}
this.player.api.marker.show(layer.ids) this.player.api.marker.show(layer.ids)
}else{ }else{
this.player.api.marker.hidePopupWindow(layer.ids) if(layer.showPop){
this.player.api.marker.hidePopupWindow(layer.ids)
}
this.player.api.marker.hide(layer.ids) this.player.api.marker.hide(layer.ids)
} }
} }
@ -207,7 +173,6 @@ export default class BaseComponent extends Vue {
public addCustom(layer,needMarker?){ public addCustom(layer,needMarker?){
if(!layer.ids.length){ if(!layer.ids.length){
const options = layer.data.map((item,index)=>{ const options = layer.data.map((item,index)=>{
console.log(item)
return { return {
id:item.id, id:item.id,
groupId:layer.value, groupId:layer.value,
@ -216,7 +181,7 @@ export default class BaseComponent extends Vue {
location:item.position, location:item.position,
smoothMotion:1, smoothMotion:1,
scale:layer.scale, scale:layer.scale,
rotation:item.rotation rotation:[0,90,0]
} }
}) })
this.player.api.customObject.add(options,(data)=>{ this.player.api.customObject.add(options,(data)=>{

8
src/views/overview.component.html
View File

@ -1,6 +1,7 @@
<div class="overview-container"> <div class="overview-container">
<MapComponent id="map" @onLoaded="getMap" @onHandleChange="handleChange"></MapComponent> <MapComponent id="map" @onLoaded="getMap" @onHandleChange="handleChange"></MapComponent>
<div class="bg-box left animate__animated"> <div class="bg-box left animate__animated">
<div class="panel-container"> <div class="panel-container">
<!-- 首页--> <!-- 首页-->
@ -57,12 +58,13 @@
</div> </div>
<div class="exitFullScreen" :style="{top:!hideAllPanel?'-90px':0}"> <div class="exitFullScreen" :style="{top:!hideAllPanel?'-90px':0}">
<div class="top-btn" @click="toggleAllPanel"> <div class="top-btn" @click="toggleAllPanel">
<i class="el-icon-close">退出导览</i> <i class="el-icon-close">退出自由导览</i>
</div> </div>
</div> </div>
<div :style="{right:!hideAllPanel?'-90px':0}" class="right-control"> <div :style="{right:!hideAllPanel?'-90px':0}" class="right-control">
<div v-show="showPlay" @click="playAction('pause')" class="play-btn"><i class="el-icon-video-pause"></i><span>暂停</span></div> <div @click="playAction('pause')" class="play-btn"><i class="el-icon-video-pause"></i><span>暂停</span></div>
<div v-show="showPlay" @click="playAction('resume')" class="play-btn"><i class="el-icon-video-play"></i><span>继续</span></div> <div @click="playAction('resume')" class="play-btn"><i class="el-icon-video-play"></i><span>继续</span></div>
</div> </div>
<!-- 大号弹窗组件--> <!-- 大号弹窗组件-->

9
src/views/overview.component.scss
View File

@ -19,7 +19,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
overflow: hidden;
#map { #map {
width: 100%; width: 100%;
@ -410,13 +410,6 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
div.overview-container{
div.none{
.panel-container{
pointer-events: none;
}
}
}

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

@ -291,17 +291,16 @@ export default class OverViewComponent extends BaseComponent {
} }
//展开导览右侧 //展开导览右侧
showViewRight(data){ showViewRight(data){
if(data.area){ this.viewRightData = data
this.addArea(data) if (this.viewRightShow){
} this.viewRightShow = false
if(data.camera){ setTimeout(()=>{
this.player.api.camera.lookAt(...data.camera) this.viewRightShow = true
} })
this.viewRightData = data; }else{
this.viewRightShow = false
setTimeout(()=>{
this.viewRightShow = true this.viewRightShow = true
})
}
} }
//右侧详情点击事件 //右侧详情点击事件
showDetail(item){ showDetail(item){
@ -321,25 +320,24 @@ export default class OverViewComponent extends BaseComponent {
data.push({ data.push({
id:item.id+'_'+i, id:item.id+'_'+i,
position:item.position[i], position:item.position[i],
rotation:item.rotation || [0,90,0], hasPop:i===1,
hasPop:item.hasPop && i===1,
}) })
} }
}else{ }else{
data.push({ data.push({
id:item.id, id:item.id,
position:item.position, position:item.position,
rotation:item.rotation || [0,90,0], hasPop:true
hasPop:item.hasPop
}) })
} }
this.viewLayer[item.id] = { this.viewLayer[item.id] = {
type:"moveMarker", type:"moveMarker",
assetPath:item.assetPath || "/JC_CustomAssets/ParticleLibrary/Exhibition/火/火焰_10", assetPath:"/JC_CustomAssets/ParticleLibrary/Exhibition/火/火焰_10",
value:"fire", value:"fire",
popData:item, popData:item,
showPop:true,
selected:true, selected:true,
scale:item.scale || [1,1,1], scale:[3,3,3],
urls:[], urls:[],
ids:[], ids:[],
data, data,
@ -352,7 +350,7 @@ export default class OverViewComponent extends BaseComponent {
this.currentEvent = item; this.currentEvent = item;
} }
} }
this.addCustom(this.viewLayer[item.id],item.hasPop); this.addCustom(this.viewLayer[item.id],true);
} }
mounted() { mounted() {
} }