feat:更新火点交互

src/assets/style/pageCommon.component.scss

@@ -2999,7 +2999,7 @@ svg.loading-icon {
   @include scrollStyle(2px);
 }
 .right-view-item{
-  width: 350px;
+  width: 330px;
   height: 98px;
   background: rgba(0,0,0,0.3);
   border-radius: 8px;
@@ -3133,4 +3133,33 @@ svg.loading-icon {
   padding: 0 12px;
 
 }
+.view-right{
+  @keyframes turnRound {
+    0%{
+      transform:rotate(0);
+    }
+    100%{
+      transform:rotate(360deg);
+    }
+  }
+  .flow-light-box{
+    overflow: hidden;
+    position: relative;
+    &::before{
+      content: "";
+      width: 400px;
+      height: 400px;
+      display: block;
+      flex: none;
+      background: conic-gradient(#F5F500 ,#F4FF00,#FF8600 ,#FF0000 ,rgba(255,255,255,0.83) ,transparent,transparent,transparent,transparent );
+      animation: turnRound 1.5s linear infinite;
+    }
+    .img-box{
+      inset: 2px;
+      position: absolute;
+      overflow: hidden;
+      background: #000;
+    }
+  }
+}
 

src/components/view/right/viewRight.component.html

@@ -9,10 +9,12 @@
         {{ viewRightData.data.content }}
     </div>
     <h3 v-show="viewRightData.data.dataList.length>0" class="sub-title  flex-0">模拟火情</h3>
-        <div class="right-view-list">
+    <div class="right-view-list view-right">
-            <div class="right-view-item d-flex align-items-center" @click="showDetail(item)" v-for="(item,i) in viewRightData.data.dataList">
+        <div class="right-view-item d-flex align-items-center" :class="activeItem === i?'flow-light-box':''" @click="clickItem(item,i)"
+             v-for="(item,i) in viewRightData.data.dataList">
             <!--                <img v-if="1%2 === 0" src="~@/assets/img/view/fire.png" alt="">
                             <img v-else src="~@/assets/img/view/fire2.png" alt="">-->
+        <div class="d-flex img-box">
                 <img :src="item.img" alt="">
             <div>
                 <p>{{ item.title }}</p>
@@ -26,9 +28,9 @@
                 </div>
             </div>
         </div>
+
+        </div>
     </div>
 
 
-
-
 </div>

src/components/view/right/viewRight.component.ts

@@ -19,7 +19,13 @@ Component.registerHooks([
 export default class ViewRightComponent extends Vue {
     @Prop({default:{}}) viewRightData!:any
 
+    activeItem = '';
 
+    clickItem(item,i){
+        this.activeItem = i
+        this.showDetail(item)
+
+    }
     //训练内容详情
     @Emit('showDetail')
     showDetail(item){

src/mock/nav.ts

@@ -1,5 +1,5 @@
 export default [{
-    label: "汉邦唐消防训基地",
+    label: "汉邦唐消防训练基地",
     value: "xf",
     children: [{
         label: "首页",

src/mock/treeData.ts

@@ -126,7 +126,7 @@ export const treeData = [
                                     3692445.44,
                                     23.0313525390625
                                 ],
-                                img: img1,
+                                img: require('@/assets/img/view/操场.png'),
                                 content: '田径场为消防员提供一个广阔、平整的训练场地，帮助他们进行各种体能训练，如跑步、跳高、跳远等。这种训练可以增强消防员的身体素质，提高他们应对火灾、抢险救援等紧急情况时的反应速度和行动能力。',
                                 mainPoint: "田径场为消防员提供一个广阔、平整的训练场地，帮助他们进行各种体能训练，如跑步、跳高、跳远等。这种训练可以增强消防员的身体素质，提高他们应对火灾、抢险救援等紧急情况时的反应速度和行动能力。"
                             }
@@ -196,7 +196,7 @@ export const treeData = [
                                         3692445.44,
                                         23.0313525390625
                                     ],
-                                    img: img1,
+                                    img: require('@/assets/img/view/操场.png'),
                                     content: '主要用于培训和提高消防队员们的团队协作、沟通和应急处理能力。在球类训练场上，消防队员们通过参与篮球、足球、排球等球类运动，锻炼他们的身体素质，增强他们在灾难现场的快速反应和应对能力。同时，球类训练场也有助于提高消防队员之间的默契配合，强化他们的团队精神，使他们在执行任务时能够更加高效地进行紧急救援。',
                                     mainPoint: "主要用于培训和提高消防队员们的团队协作、沟通和应急处理能力。在球类训练场上，消防队员们通过参与篮球、足球、排球等球类运动，锻炼他们的身体素质，增强他们在灾难现场的快速反应和应对能力。同时，球类训练场也有助于提高消防队员之间的默契配合，强化他们的团队精神，使他们在执行任务时能够更加高效地进行紧急救援。"
                                 }
@@ -314,7 +314,7 @@ export const treeData = [
                                     ],
                                     // assetPath:"/JC_CustomAssets/ParticleLibrary/Exhibition/火/火焰_3",
                                     scale: [0.1, 0.1, 0.1],
-                                    img: img1,
+                                    img: require('@/assets/img/view/密闭空间烟热.png'),
                                     content: '烟热训练设施是一种专门为消防员提供实战训练和技能提升的模拟环境。这个设施模拟了火灾现场产生的烟雾和高温环境，以帮助消防员了解火灾现场的实际情况，提高他们的应对能力。',
                                     mainPoint: '烟热训练设施是一种专门为消防员提供实战训练和技能提升的模拟环境。这个设施模拟了火灾现场产生的烟雾和高温环境，以帮助消防员了解火灾现场的实际情况，提高他们的应对能力。\n' +
                                         '\n' +
@@ -401,7 +401,7 @@ export const treeData = [
                                     ],
                                     rotation: [-90, 0, 0],
                                     assetPath: "/JC_CustomAssets/ParticleLibrary/Exhibition/火/火焰_3",
-                                    img: img1,
+                                    img: require('@/assets/img/view/火幕墙起火.png'),
                                     content: '火幕墙训练设施是一种模拟建筑物火灾现场的特殊设备，通常提供多层楼结构，具有真实火场环境的烟雾、火苗和火势。它能帮助消防队员训练攀爬、疏散、搜救等任务，同时提高他们在火场环境中快速、准确判断火势传播、开展灭火作战的能力。',
                                     mainPoint: '火幕墙训练设施是一种模拟建筑物火灾现场的特殊设备，通常提供多层楼结构，具有真实火场环境的烟雾、火苗和火势。它能帮助消防队员训练攀爬、疏散、搜救等任务，同时提高他们在火场环境中快速、准确判断火势传播、开展灭火作战的能力。\n' +
                                         '\n' +
@@ -466,7 +466,7 @@ export const treeData = [
                                     ]],
                                     assetPath: "/JC_CustomAssets/ParticleLibrary/Exhibition/火/火焰_3",
                                     scale: [0.5, 0.5, 1],
-                                    img: img1,
+                                    img: require('@/assets/img/view/顶层沸火.png'),
                                     content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
                                     mainPoint: "模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
                                 }, {
@@ -474,6 +474,15 @@ export const treeData = [
                                     rate: 2,
                                     title: '室内火灾',
                                     point: '1',
+                                    look:[
+                                        11660769.927969,
+                                        3692451.926953,
+                                        44.95708,
+                                        0,
+                                        -34.171764,
+                                        86.71463,
+                                        2
+                                    ],
                                     position: [
                                         11660769.28,
                                         3692447.36,
@@ -483,7 +492,7 @@ export const treeData = [
                                     distance:1,
                                     assetPath: "/JC_CustomAssets/ParticleLibrary/Exhibition/火/火焰_3",
                                     scale: [0.3, 0.3, 0.3],
-                                    img: img2,
+                                    img: require('@/assets/img/view/室内火.png'),
                                     content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
                                     mainPoint: "模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
                                 }
@@ -520,7 +529,7 @@ export const treeData = [
                                     scale: [0.5, 0.5, 1],
                                     needFocus:true,
                                     distance:3,
-                                    img: img1,
+                                    img: require('@/assets/img/view/室内真火.png'),
                                     content: '烟热逃生训练是一种模拟火灾烟雾环境下的逃生演练，旨在提高公众在火灾事故中的自救能力和安全意识。这种训练通常在专门的训练场所进行，模拟真实火灾中的烟雾、热量和视线受限等情况，参与者需要学习如何迅速、安全地逃离火场。',
                                     mainPoint: "烟热逃生训练是一种模拟火灾烟雾环境下的逃生演练，旨在提高公众在火灾事故中的自救能力和安全意识。这种训练通常在专门的训练场所进行，模拟真实火灾中的烟雾、热量和视线受限等情况，参与者需要学习如何迅速、安全地逃离火场。"
                                 }, {
@@ -538,7 +547,7 @@ export const treeData = [
                                     scale: [0.5, 0.5, 1],
                                     needFocus:true,
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/室内真火.png'),
                                     content: '室内真火训练，是一种专门针对消防员、救援人员和其他职业员工的安全培训。该训练在模拟的室内环境中进行，以模拟实际火场的情况，从而提高参训人员在火灾现场的实战经验和应变能力。',
                                     mainPoint: "室内真火训练，是一种专门针对消防员、救援人员和其他职业员工的安全培训。该训练在模拟的室内环境中进行，以模拟实际火场的情况，从而提高参训人员在火灾现场的实战经验和应变能力。"
                                 }, {
@@ -556,7 +565,7 @@ export const treeData = [
                                     scale: [0.5, 0.5, 1],
                                     needFocus:true,
                                     distance:3,
-                                    img: img1,
+                                    img: require('@/assets/img/view/室内真火.png'),
                                     content: '轰燃火训练，即爆燃火灾应对训练，是一种针对火灾应急处理的专业培训课程。该课程主要针对各种不同类型的火灾场景，教授学员如何正确、有效地采取措施进行灭火以及预防火灾的扩大。',
                                     mainPoint: "轰燃火训练，即爆燃火灾应对训练，是一种针对火灾应急处理的专业培训课程。该课程主要针对各种不同类型的火灾场景，教授学员如何正确、有效地采取措施进行灭火以及预防火灾的扩大。"
                                 }
@@ -593,7 +602,7 @@ export const treeData = [
                                     scale: [0.2, 0.2, 0.2],
                                     needFocus:true,
                                     distance:3,
-                                    img: img1,
+                                    img: require('@/assets/img/view/泵火.png'),
                                     content: '泵发生火灾。',
                                     mainPoint: "泵发生火灾。"
                                 }, {
@@ -638,7 +647,7 @@ export const treeData = [
                                     scale: [0.5, 0.5, 1],
                                     needFocus:true,
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/地面流淌火 2.png'),
                                     content: '地面流淌火是指在化工行业中由于生产、运输和仓储过程中地面泄漏液体燃料燃烧所产生的地面火灾。这种火灾通常比较紧急，容易引发大面积火灾，其传播速度和毁坏力度较大。在化工行业，地面流淌火是一种常见的火灾现象，对生产设备和员工具有很大的安全隐患。',
                                     mainPoint: "地面流淌火是指在化工行业中由于生产、运输和仓储过程中地面泄漏液体燃料燃烧所产生的地面火灾。这种火灾通常比较紧急，容易引发大面积火灾，其传播速度和毁坏力度较大。在化工行业，地面流淌火是一种常见的火灾现象，对生产设备和员工具有很大的安全隐患。"
                                 }, {
@@ -656,7 +665,7 @@ export const treeData = [
                                     scale: [0.8, 0.8, 1],
                                     needFocus:true,
                                     distance:3,
-                                    img: img1,
+                                    img: require('@/assets/img/view/脱盐罐平台火.png'),
                                     content: '脱盐罐平台火是指在化工行业中，脱盐罐及其平台发生火灾事故的情况。脱盐罐是化工生产过程中的一种常见设备，主要用于对原料中的含盐杂质进行脱除，以提高产品质量和减少设备的腐蚀程度。',
                                     mainPoint: "脱盐罐平台火是指在化工行业中，脱盐罐及其平台发生火灾事故的情况。脱盐罐是化工生产过程中的一种常见设备，主要用于对原料中的含盐杂质进行脱除，以提高产品质量和减少设备的腐蚀程度。"
                                 }, {
@@ -674,7 +683,7 @@ export const treeData = [
                                     scale: [0.8, 0.8, 1],
                                     needFocus:true,
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/初馏塔回流罐顶火.png'),
                                     content: '初馏塔回流罐火灾是指在化工行业石油化工工艺过程中，由于各种原因引发的初馏塔回流罐内外部的火灾事故。初馏塔回流罐是用于存储石油化工原料油、中间产品和成品油的设备，其作用主要是在石油化工生产过程中收集和储存回流溶剂，常见于石油炼制、化学生产等工艺过程中。',
                                     mainPoint: "初馏塔回流罐火灾是指在化工行业石油化工工艺过程中，由于各种原因引发的初馏塔回流罐内外部的火灾事故。初馏塔回流罐是用于存储石油化工原料油、中间产品和成品油的设备，其作用主要是在石油化工生产过程中收集和储存回流溶剂，常见于石油炼制、化学生产等工艺过程中。"
                                 }, {
@@ -692,7 +701,7 @@ export const treeData = [
                                     scale: [0.5, 0.5, 1],
                                     needFocus:true,
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/常压塔顶火.png'),
                                     content: '常压炉是一种用于加热和混合各种化学品的主要设备，其在生产过程中需要对原料进行升温、保温、冷却等操作。由于设备的长期使用或磨损，可能导致设备的某些部分损坏，如密封不良、泄漏等，从而引发火灾。操作人员没有严格按照操作规程进行操作，如误操作、忘记关阀门等，都可能引发火灾。',
                                     mainPoint: "常压炉是一种用于加热和混合各种化学品的主要设备，其在生产过程中需要对原料进行升温、保温、冷却等操作。由于设备的长期使用或磨损，可能导致设备的某些部分损坏，如密封不良、泄漏等，从而引发火灾。操作人员没有严格按照操作规程进行操作，如误操作、忘记关阀门等，都可能引发火灾。"
                                 }, {
@@ -734,7 +743,7 @@ export const treeData = [
                                     needFocus:true,
                                     rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/初馏塔壁火.png'),
                                     content: '培训人员针对有毒气体泄漏事故的应急响应、现场疏散、医疗救护等方面的技能',
                                     mainPoint: "培训人员针对有毒气体泄漏事故的应急响应、现场疏散、医疗救护等方面的技能"
                                 }, {
@@ -752,7 +761,7 @@ export const treeData = [
                                     scale: [0.5, 0.5, 1],
                                     needFocus:true,
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/常压塔顶火.png'),
                                     content: '培训人员针对有毒气体泄漏事故的应急响应、现场疏散、医疗救护等方面的技能',
                                     mainPoint: "培训人员针对有毒气体泄漏事故的应急响应、现场疏散、医疗救护等方面的技能"
                                 }, {
@@ -771,7 +780,7 @@ export const treeData = [
                                     needFocus:true,
                                     rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/一层泵液体泄漏.png'),
                                     content: '培训人员针对有毒气体泄漏事故的应急响应、现场疏散、医疗救护等方面的技能',
                                     mainPoint: "培训人员针对有毒气体泄漏事故的应急响应、现场疏散、医疗救护等方面的技能"
                                 }, {
@@ -790,7 +799,7 @@ export const treeData = [
                                     needFocus:true,
                                     rotation:[-90,0,0],
                                     distance:1,
-                                    img: img2,
+                                    img: require('@/assets/img/view/一层管道折断液体泄漏.png'),
                                     content: '培训人员针对有毒气体泄漏事故的应急响应、现场疏散、医疗救护等方面的技能',
                                     mainPoint: "培训人员针对有毒气体泄漏事故的应急响应、现场疏散、医疗救护等方面的技能"
                                 }, {
@@ -809,7 +818,7 @@ export const treeData = [
                                     needFocus:true,
                                     rotation:[-90,0,0],
                                     distance:1,
-                                    img: img2,
+                                    img: require('@/assets/img/view/一层管道液体泄漏.png'),
                                     content: '培训人员针对有毒气体泄漏事故的应急响应、现场疏散、医疗救护等方面的技能',
                                     mainPoint: "培训人员针对有毒气体泄漏事故的应急响应、现场疏散、医疗救护等方面的技能"
                                 }, {
@@ -828,7 +837,7 @@ export const treeData = [
                                     needFocus:true,
                                     rotation:[-90,0,0],
                                     distance:2,
-                                    img: img2,
+                                    img: require('@/assets/img/view/一层脱盐罐管道泄漏.png'),
                                     content: '培训人员针对有毒气体泄漏事故的应急响应、现场疏散、医疗救护等方面的技能',
                                     mainPoint: "培训人员针对有毒气体泄漏事故的应急响应、现场疏散、医疗救护等方面的技能"
                                 }, {
@@ -846,7 +855,7 @@ export const treeData = [
                                     scale: [0.2, 0.2, 0.1],
                                     needFocus:true,
                                     distance:2,
-                                    img: img2,
+                                    img: require('@/assets/img/view/二层管道液体泄漏.png'),
                                     content: '培训人员针对有毒气体泄漏事故的应急响应、现场疏散、医疗救护等方面的技能',
                                     mainPoint: "培训人员针对有毒气体泄漏事故的应急响应、现场疏散、医疗救护等方面的技能"
                                 }, {
@@ -865,7 +874,7 @@ export const treeData = [
                                     needFocus:true,
                                     rotation:[-90,0,0],
                                     distance:2,
-                                    img: img2,
+                                    img: require('@/assets/img/view/二层管道液体泄漏.png'),
                                     content: '培训人员针对有毒气体泄漏事故的应急响应、现场疏散、医疗救护等方面的技能',
                                     mainPoint: "培训人员针对有毒气体泄漏事故的应急响应、现场疏散、医疗救护等方面的技能"
                                 }, {
@@ -883,7 +892,7 @@ export const treeData = [
                                     scale: [0.2, 0.2, 0.2],
                                     needFocus:true,
                                     distance:2,
-                                    img: img2,
+                                    img: require('@/assets/img/view/二层管道液体泄漏.png'),
                                     content: '培训人员针对有毒气体泄漏事故的应急响应、现场疏散、医疗救护等方面的技能',
                                     mainPoint: "培训人员针对有毒气体泄漏事故的应急响应、现场疏散、医疗救护等方面的技能"
                                 }, {
@@ -902,7 +911,7 @@ export const treeData = [
                                     needFocus:true,
                                     rotation:[-90,0,0],
                                     distance:2,
-                                    img: img2,
+                                    img: require('@/assets/img/view/三层管道液体泄漏.png'),
                                     content: '培训人员针对有毒气体泄漏事故的应急响应、现场疏散、医疗救护等方面的技能',
                                     mainPoint: "培训人员针对有毒气体泄漏事故的应急响应、现场疏散、医疗救护等方面的技能"
                                 }
@@ -1001,7 +1010,7 @@ export const treeData = [
                                     scale: [0.5, 0.5, 1],
                                     needFocus:true,
                                     distance:3,
-                                    img: img1,
+                                    img: require('@/assets/img/view/密封圈火.png'),
                                     content: '储油罐因操作失误、机械故障、自然灾害或其他原因引发的火灾。',
                                     mainPoint: "储油罐因操作失误、机械故障、自然灾害或其他原因引发的火灾。"
                                 }, {
@@ -1045,7 +1054,7 @@ export const treeData = [
                                     scale: [0.5, 0.5, 1],
                                     needFocus:true,
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/罐顶液面火.png'),
                                     content: '由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸',
                                     mainPoint: "由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸"
                                 }, {
@@ -1086,7 +1095,7 @@ export const treeData = [
                                     rotation:[90,0,0],
                                     needFocus:true,
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/罐壁流淌火.png'),
                                     content: '设施中可燃气体或液体泄漏、化学反应等原因引发的爆炸。',
                                     mainPoint: "设施中可燃气体或液体泄漏、化学反应等原因引发的爆炸。"
                                 }, {
@@ -1135,7 +1144,7 @@ export const treeData = [
                                     scale: [0.5, 0.5, 0.5],
                                     needFocus:true,
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/地面流淌火.png'),
                                     content: '设施中可燃气体或液体泄漏、化学反应等原因引发的爆炸。',
                                     mainPoint: "设施中可燃气体或液体泄漏、化学反应等原因引发的爆炸。"
                                 }, {
@@ -1163,7 +1172,7 @@ export const treeData = [
                                     needFocus:true,
                                     rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/管道腐蚀泄露.png'),
                                     content: '设施中可燃气体或液体泄漏、化学反应等原因引发的爆炸。',
                                     mainPoint: "设施中可燃气体或液体泄漏、化学反应等原因引发的爆炸。"
                                 }, {
@@ -1191,7 +1200,7 @@ export const treeData = [
                                     needFocus:true,
                                     rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/管道腐蚀泄露.png'),
                                     content: '设施中可燃气体或液体泄漏、化学反应等原因引发的爆炸。',
                                     mainPoint: "设施中可燃气体或液体泄漏、化学反应等原因引发的爆炸。"
                                 }, {
@@ -1219,7 +1228,7 @@ export const treeData = [
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/法兰错位泄露.png'),
                                     content: '设施中可燃气体或液体泄漏、化学反应等原因引发的爆炸。',
                                     mainPoint: "设施中可燃气体或液体泄漏、化学反应等原因引发的爆炸。"
                                 }, {
@@ -1247,7 +1256,7 @@ export const treeData = [
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/法兰错位泄露.png'),
                                     content: '设施中可燃气体或液体泄漏、化学反应等原因引发的爆炸。',
                                     mainPoint: "设施中可燃气体或液体泄漏、化学反应等原因引发的爆炸。"
                                 }, {
@@ -1275,7 +1284,7 @@ export const treeData = [
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/管道腐蚀泄露.png'),
                                     content: '设施中可燃气体或液体泄漏、化学反应等原因引发的爆炸。',
                                     mainPoint: "设施中可燃气体或液体泄漏、化学反应等原因引发的爆炸。"
                                 }, {
@@ -1303,7 +1312,7 @@ export const treeData = [
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/管道腐蚀泄露.png'),
                                     content: '设施中可燃气体或液体泄漏、化学反应等原因引发的爆炸。',
                                     mainPoint: "设施中可燃气体或液体泄漏、化学反应等原因引发的爆炸。"
                                 }, {
@@ -1331,7 +1340,7 @@ export const treeData = [
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/法兰错位泄露.png'),
                                     content: '设施中可燃气体或液体泄漏、化学反应等原因引发的爆炸。',
                                     mainPoint: "设施中可燃气体或液体泄漏、化学反应等原因引发的爆炸。"
                                 }, {
@@ -1359,7 +1368,7 @@ export const treeData = [
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/法兰错位泄露.png'),
                                     content: '设施中可燃气体或液体泄漏、化学反应等原因引发的爆炸。',
                                     mainPoint: "设施中可燃气体或液体泄漏、化学反应等原因引发的爆炸。"
                                 }, {
@@ -1387,7 +1396,7 @@ export const treeData = [
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/法兰错位泄露.png'),
                                     content: '设施中可燃气体或液体泄漏、化学反应等原因引发的爆炸。',
                                     mainPoint: "设施中可燃气体或液体泄漏、化学反应等原因引发的爆炸。"
                                 }, {
@@ -1415,7 +1424,7 @@ export const treeData = [
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/法兰错位泄露.png'),
                                     content: '设施中可燃气体或液体泄漏、化学反应等原因引发的爆炸。',
                                     mainPoint: "设施中可燃气体或液体泄漏、化学反应等原因引发的爆炸。"
                                 }
@@ -1452,7 +1461,7 @@ export const treeData = [
                                     scale: [0.5, 0.5, 1],
                                     needFocus:true,
                                     distance:3,
-                                    img: img1,
+                                    img: require('@/assets/img/view/罐顶火.png'),
                                     content: '气罐因操作失误、机械故障、自然灾害或其他原因引发的火灾。',
                                     mainPoint: "气罐因操作失误、机械故障、自然灾害或其他原因引发的火灾。"
                                 }, {
@@ -1480,7 +1489,7 @@ export const treeData = [
                                     rotation:[-180,0,0],
                                     needFocus:true,
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/罐顶火.png'),
                                     content: '由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸',
                                     mainPoint: "由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸"
                                 }, {
@@ -1508,7 +1517,7 @@ export const treeData = [
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/管道腐蚀泄露.png'),
                                     content: '由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸',
                                     mainPoint: "由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸"
                                 }, {
@@ -1536,7 +1545,7 @@ export const treeData = [
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/管道腐蚀泄露.png'),
                                     content: '由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸',
                                     mainPoint: "由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸"
                                 }, {
@@ -1564,7 +1573,7 @@ export const treeData = [
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/管道腐蚀泄露.png'),
                                     content: '由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸',
                                     mainPoint: "由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸"
                                 }, {
@@ -1592,7 +1601,7 @@ export const treeData = [
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/法兰错位泄露.png'),
                                     content: '由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸',
                                     mainPoint: "由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸"
                                 }, {
@@ -1620,7 +1629,7 @@ export const treeData = [
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/管道腐蚀泄露.png'),
                                     content: '由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸',
                                     mainPoint: "由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸"
                                 }, {
@@ -1648,7 +1657,7 @@ export const treeData = [
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/管道腐蚀泄露.png'),
                                     content: '由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸',
                                     mainPoint: "由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸"
                                 }, {
@@ -1676,7 +1685,7 @@ export const treeData = [
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/法兰错位泄露.png'),
                                     content: '由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸',
                                     mainPoint: "由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸"
                                 }, {
@@ -1704,7 +1713,7 @@ export const treeData = [
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/法兰错位泄露.png'),
                                     content: '由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸',
                                     mainPoint: "由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸"
                                 }, {
@@ -1732,7 +1741,7 @@ export const treeData = [
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/法兰错位泄露.png'),
                                     content: '由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸',
                                     mainPoint: "由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸"
                                 }, {
@@ -1760,7 +1769,7 @@ export const treeData = [
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/法兰错位泄露.png'),
                                     content: '由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸',
                                     mainPoint: "由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸"
                                 }
@@ -1797,9 +1806,9 @@ export const treeData = [
                                     scale: [0.3, 0.3, 0.3],
                                     needFocus:true,
                                     distance:3,
-                                    img: img1,
+                                    img: require('@/assets/img/view/槽罐车罐体起火.png'),
-                                    content: '泵发生火灾。',
+                                    content: '槽罐车罐体起火。',
-                                    mainPoint: "泵发生火灾。"
+                                    mainPoint: "槽罐车罐体起火。"
                                 },{
                                     id: Mock.mock("@id"),
                                     rate: 1,
@@ -1815,7 +1824,7 @@ export const treeData = [
                                     scale: [0.2, 0.2, 0.2],
                                     needFocus:true,
                                     distance:3,
-                                    img: img1,
+                                    img: require('@/assets/img/view/槽罐车侧壁泄露.png'),
                                     content: '槽罐车侧壁泄露。',
                                     mainPoint: "槽罐车侧壁泄露。"
                                 },{
@@ -1843,7 +1852,7 @@ export const treeData = [
                                     rotation:[0,-90,0],
                                     needFocus:true,
                                     distance:3,
-                                    img: img1,
+                                    img: require('@/assets/img/view/氮气泄露.png'),
                                     content: '氮气泄露。',
                                     mainPoint: "氮气泄露。"
                                 },
@@ -1890,7 +1899,7 @@ export const treeData = [
                                     scale: [0.5, 0.5, 0.5],
                                     needFocus:true,
                                     distance:3,
-                                    img: img1,
+                                    img: require('@/assets/img/view/储电站火灾.png'),
                                     content: '储电站火灾。',
                                     mainPoint: "储电站火灾。"
                                 }

src/utils/player.ts

@@ -57,7 +57,7 @@ export default class PlayerUtils{
         this.api.camera.get((data)=>{
             console.log(data)
         })
-    };;
+    };
     public onKeyDown :any= null;
     public onKeyUp :any= null;
     public onKeyPress :any= null;

src/views/overview.component.html

@@ -1,6 +1,13 @@
 <div class="overview-container">
 
-    <MapComponent id="map" @onLoaded="getMap" @onHandleChange="handleChange"></MapComponent>
+    <MapComponent v-show="!showLoading" id="map" @onLoaded="getMap" @onHandleChange="handleChange"></MapComponent>
+  <div v-show="showLoading" class="loading">
+      <div>
+          <img src="~@/assets/img/loading.png" alt="">
+          正在加载园区…
+      </div>
+
+  </div>
     <div class="bg-box left animate__animated">
         <div class="panel-container">
             <!-- 首页-->

src/views/overview.component.scss

@@ -417,6 +417,29 @@ div.overview-container{
     }
   }
 }
-
+@keyframes rotate {
+  0%{-webkit-transform:rotate(0deg);}
+  25%{-webkit-transform:rotate(90deg);}
+  50%{-webkit-transform:rotate(180deg);}
+  75%{-webkit-transform:rotate(270deg);}
+  100%{-webkit-transform:rotate(360deg);}
+}
+
+.loading{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: #333333;
+  div{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  img{
+    animation: rotate 1s linear infinite;
+  }
+}
 
 

src/views/overview.component.ts

@@ -59,7 +59,7 @@ export default class OverViewComponent extends BaseComponent {
     public viewRightData = {};
     //告警详情
     public info = {};
-
+    public showLoading = true
 
     public viewLayer = {} as any;
     async created(){
@@ -80,6 +80,7 @@ export default class OverViewComponent extends BaseComponent {
     public getMap(store: any) {
         this.player = store;
         this.lock = false
+        this.showLoading = false
         this.resetMap();
         this.player.api.cameraTour.delete("1");
         this.player.api.cameraTour.delete("2");
@@ -228,27 +229,6 @@ export default class OverViewComponent extends BaseComponent {
         }else{
             this.waringRightShow = true
         }
-      /*  {
-            "command": 6,
-            "timestamp": 1684489766867,
-            "callbackIndex": 36,
-            "result": 0,
-            "resultMessage": "OK",
-            "x": 11660880.448125,
-            "y": 3692428.432223,
-            "z": 21.876462,
-            "pitch": -85.465675,
-            "yaw": 90.067558,
-            "roll": -0.000626,
-            "camera": [
-            11660880.448125,
-            3692428.432223,
-            21.876462,
-            -85.465675,
-            90.067558,
-            -0.000626
-        ]
-        }*/
         const position = item.position
        this.player.api.camera.lookAt(
            position[0],