diff --git a/src/assets/img/loading.png b/src/assets/img/loading.png
new file mode 100644
index 0000000..9b2a583
Binary files /dev/null and b/src/assets/img/loading.png differ
diff --git a/src/assets/img/view/一层泵液体泄漏.png b/src/assets/img/view/一层泵液体泄漏.png
new file mode 100644
index 0000000..3ff29da
Binary files /dev/null and b/src/assets/img/view/一层泵液体泄漏.png differ
diff --git a/src/assets/img/view/一层管道折断液体泄漏.png b/src/assets/img/view/一层管道折断液体泄漏.png
new file mode 100644
index 0000000..298740a
Binary files /dev/null and b/src/assets/img/view/一层管道折断液体泄漏.png differ
diff --git a/src/assets/img/view/一层管道液体泄漏.png b/src/assets/img/view/一层管道液体泄漏.png
new file mode 100644
index 0000000..a44b1b4
Binary files /dev/null and b/src/assets/img/view/一层管道液体泄漏.png differ
diff --git a/src/assets/img/view/一层脱盐罐管道泄漏.png b/src/assets/img/view/一层脱盐罐管道泄漏.png
new file mode 100644
index 0000000..7620d32
Binary files /dev/null and b/src/assets/img/view/一层脱盐罐管道泄漏.png differ
diff --git a/src/assets/img/view/一层脱盐罐管道泄漏备份.png b/src/assets/img/view/一层脱盐罐管道泄漏备份.png
new file mode 100644
index 0000000..7620d32
Binary files /dev/null and b/src/assets/img/view/一层脱盐罐管道泄漏备份.png differ
diff --git a/src/assets/img/view/三层管道液体泄漏.png b/src/assets/img/view/三层管道液体泄漏.png
new file mode 100644
index 0000000..000a8a4
Binary files /dev/null and b/src/assets/img/view/三层管道液体泄漏.png differ
diff --git a/src/assets/img/view/二层管道液体泄漏.png b/src/assets/img/view/二层管道液体泄漏.png
new file mode 100644
index 0000000..11bf4af
Binary files /dev/null and b/src/assets/img/view/二层管道液体泄漏.png differ
diff --git a/src/assets/img/view/储电站火灾.png b/src/assets/img/view/储电站火灾.png
new file mode 100644
index 0000000..6511782
Binary files /dev/null and b/src/assets/img/view/储电站火灾.png differ
diff --git a/src/assets/img/view/初馏塔回流罐顶火.png b/src/assets/img/view/初馏塔回流罐顶火.png
new file mode 100644
index 0000000..b031b67
Binary files /dev/null and b/src/assets/img/view/初馏塔回流罐顶火.png differ
diff --git a/src/assets/img/view/初馏塔壁火.png b/src/assets/img/view/初馏塔壁火.png
new file mode 100644
index 0000000..47a849d
Binary files /dev/null and b/src/assets/img/view/初馏塔壁火.png differ
diff --git a/src/assets/img/view/地面流淌火 2.png b/src/assets/img/view/地面流淌火 2.png
new file mode 100644
index 0000000..9d13217
Binary files /dev/null and b/src/assets/img/view/地面流淌火 2.png differ
diff --git a/src/assets/img/view/地面流淌火.png b/src/assets/img/view/地面流淌火.png
new file mode 100644
index 0000000..786b43f
Binary files /dev/null and b/src/assets/img/view/地面流淌火.png differ
diff --git a/src/assets/img/view/地面流淌火备份.png b/src/assets/img/view/地面流淌火备份.png
new file mode 100644
index 0000000..786b43f
Binary files /dev/null and b/src/assets/img/view/地面流淌火备份.png differ
diff --git a/src/assets/img/view/室内火.png b/src/assets/img/view/室内火.png
new file mode 100644
index 0000000..05890be
Binary files /dev/null and b/src/assets/img/view/室内火.png differ
diff --git a/src/assets/img/view/室内真火.png b/src/assets/img/view/室内真火.png
new file mode 100644
index 0000000..cafb64c
Binary files /dev/null and b/src/assets/img/view/室内真火.png differ
diff --git a/src/assets/img/view/密封圈火.png b/src/assets/img/view/密封圈火.png
new file mode 100644
index 0000000..13ee00f
Binary files /dev/null and b/src/assets/img/view/密封圈火.png differ
diff --git a/src/assets/img/view/密闭空间烟热 2.png b/src/assets/img/view/密闭空间烟热 2.png
new file mode 100644
index 0000000..73d5ffe
Binary files /dev/null and b/src/assets/img/view/密闭空间烟热 2.png differ
diff --git a/src/assets/img/view/密闭空间烟热.png b/src/assets/img/view/密闭空间烟热.png
new file mode 100644
index 0000000..80f90e3
Binary files /dev/null and b/src/assets/img/view/密闭空间烟热.png differ
diff --git a/src/assets/img/view/常压塔顶火.png b/src/assets/img/view/常压塔顶火.png
new file mode 100644
index 0000000..4455a75
Binary files /dev/null and b/src/assets/img/view/常压塔顶火.png differ
diff --git a/src/assets/img/view/常压炉火.png b/src/assets/img/view/常压炉火.png
new file mode 100644
index 0000000..9fe148a
Binary files /dev/null and b/src/assets/img/view/常压炉火.png differ
diff --git a/src/assets/img/view/操场.png b/src/assets/img/view/操场.png
new file mode 100644
index 0000000..30a387a
Binary files /dev/null and b/src/assets/img/view/操场.png differ
diff --git a/src/assets/img/view/槽罐车侧壁泄露.png b/src/assets/img/view/槽罐车侧壁泄露.png
new file mode 100644
index 0000000..2d22e48
Binary files /dev/null and b/src/assets/img/view/槽罐车侧壁泄露.png differ
diff --git a/src/assets/img/view/槽罐车罐体起火.png b/src/assets/img/view/槽罐车罐体起火.png
new file mode 100644
index 0000000..9b2b0e8
Binary files /dev/null and b/src/assets/img/view/槽罐车罐体起火.png differ
diff --git a/src/assets/img/view/氮气泄露.png b/src/assets/img/view/氮气泄露.png
new file mode 100644
index 0000000..d7761f5
Binary files /dev/null and b/src/assets/img/view/氮气泄露.png differ
diff --git a/src/assets/img/view/法兰错位泄露.png b/src/assets/img/view/法兰错位泄露.png
new file mode 100644
index 0000000..dcc2f94
Binary files /dev/null and b/src/assets/img/view/法兰错位泄露.png differ
diff --git a/src/assets/img/view/泵火.png b/src/assets/img/view/泵火.png
new file mode 100644
index 0000000..6b57192
Binary files /dev/null and b/src/assets/img/view/泵火.png differ
diff --git a/src/assets/img/view/火幕墙起火.png b/src/assets/img/view/火幕墙起火.png
new file mode 100644
index 0000000..5df727d
Binary files /dev/null and b/src/assets/img/view/火幕墙起火.png differ
diff --git a/src/assets/img/view/管道腐蚀泄露.png b/src/assets/img/view/管道腐蚀泄露.png
new file mode 100644
index 0000000..e872725
Binary files /dev/null and b/src/assets/img/view/管道腐蚀泄露.png differ
diff --git a/src/assets/img/view/罐壁流淌火 2.png b/src/assets/img/view/罐壁流淌火 2.png
new file mode 100644
index 0000000..2e6a5b4
Binary files /dev/null and b/src/assets/img/view/罐壁流淌火 2.png differ
diff --git a/src/assets/img/view/罐壁流淌火.png b/src/assets/img/view/罐壁流淌火.png
new file mode 100644
index 0000000..2e6a5b4
Binary files /dev/null and b/src/assets/img/view/罐壁流淌火.png differ
diff --git a/src/assets/img/view/罐顶液面火.png b/src/assets/img/view/罐顶液面火.png
new file mode 100644
index 0000000..b730d76
Binary files /dev/null and b/src/assets/img/view/罐顶液面火.png differ
diff --git a/src/assets/img/view/罐顶火.png b/src/assets/img/view/罐顶火.png
new file mode 100644
index 0000000..80c338b
Binary files /dev/null and b/src/assets/img/view/罐顶火.png differ
diff --git a/src/assets/img/view/脱盐罐平台火.png b/src/assets/img/view/脱盐罐平台火.png
new file mode 100644
index 0000000..5d3dbcf
Binary files /dev/null and b/src/assets/img/view/脱盐罐平台火.png differ
diff --git a/src/assets/img/view/螺纹泄露.png b/src/assets/img/view/螺纹泄露.png
new file mode 100644
index 0000000..11728c8
Binary files /dev/null and b/src/assets/img/view/螺纹泄露.png differ
diff --git a/src/assets/img/view/顶层沸火.png b/src/assets/img/view/顶层沸火.png
new file mode 100644
index 0000000..cee4c0f
Binary files /dev/null and b/src/assets/img/view/顶层沸火.png differ
diff --git a/src/assets/style/pageCommon.component.scss b/src/assets/style/pageCommon.component.scss
index fad0bfa..73c38c8 100644
--- a/src/assets/style/pageCommon.component.scss
+++ b/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;
+    }
+  }
+}
 
diff --git a/src/components/view/right/viewRight.component.html b/src/components/view/right/viewRight.component.html
index dbfe1cf..1766db2 100644
--- a/src/components/view/right/viewRight.component.html
+++ b/src/components/view/right/viewRight.component.html
@@ -1,34 +1,36 @@
 <div class="env-right emergency-part">
 
-        <div class="view-right-title d-flex is-justify-space-between align-items-center flex-0">
-            <span>{{viewRightData.label}}</span>
-            <span @click="closeRight" class="close-style"><i class="el-icon-close"></i>关闭</span>
-        </div>
-        <h3 class="sub-title  flex-0">训练内容</h3>
-        <div class="text-con  flex-0">
-            {{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-item d-flex align-items-center" @click="showDetail(item)" 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="">-->
-                <img  :src="item.img" alt="">
-                <div>
-                    <p>{{item.title}}</p>
-                    <div class="d-flex align-items-center right-sub-text">
-                        <span>难度:</span>
-                        <el-rate disabled v-model="item.rate" :max="5"></el-rate>
-                    </div>
-                    <div class="d-flex align-items-center right-sub-text">
-                        <span>火点:</span>
-                        <span>{{item.point}}个</span>
-                    </div>
+    <div class="view-right-title d-flex is-justify-space-between align-items-center flex-0">
+        <span>{{ viewRightData.label }}</span>
+        <span @click="closeRight" class="close-style"><i class="el-icon-close"></i>关闭</span>
+    </div>
+    <h3 class="sub-title  flex-0">训练内容</h3>
+    <div class="text-con  flex-0">
+        {{ viewRightData.data.content }}
+    </div>
+    <h3 v-show="viewRightData.data.dataList.length>0" class="sub-title  flex-0">模拟火情</h3>
+    <div class="right-view-list view-right">
+        <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>
+                <div class="d-flex align-items-center right-sub-text">
+                    <span>难度:</span>
+                    <el-rate disabled v-model="item.rate" :max="5"></el-rate>
+                </div>
+                <div class="d-flex align-items-center right-sub-text">
+                    <span>火点:</span>
+                    <span>{{ item.point }}个</span>
                 </div>
             </div>
         </div>
 
-
+        </div>
+    </div>
 
 
 </div>
diff --git a/src/components/view/right/viewRight.component.ts b/src/components/view/right/viewRight.component.ts
index 570f424..a20a29d 100644
--- a/src/components/view/right/viewRight.component.ts
+++ b/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){
diff --git a/src/mock/nav.ts b/src/mock/nav.ts
index 25d9db2..21911c4 100644
--- a/src/mock/nav.ts
+++ b/src/mock/nav.ts
@@ -1,5 +1,5 @@
 export default [{
-    label: "汉邦唐消防训基地",
+    label: "汉邦唐消防训练基地",
     value: "xf",
     children: [{
         label: "首页",
diff --git a/src/mock/treeData.ts b/src/mock/treeData.ts
index ec22d0b..c2b9e05 100644
--- a/src/mock/treeData.ts
+++ b/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: "由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸"
                                 }, {
@@ -1503,12 +1512,12 @@ export const treeData = [
                                         3692579.52,
                                         3.077447814941406
                                     ],
-                                    assetPath: "/JC_CustomAssets/ParticleLibrary/Exhibition/水/喷水_1",
+                                    assetPath: "/JC_CustomAssets/ParticleLibrary/Exhibition/烟雾/烟雾_3",
                                     scale: [0.2, 0.2, 0.4],
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/管道腐蚀泄露.png'),
                                     content: '由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸',
                                     mainPoint: "由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸"
                                 }, {
@@ -1531,12 +1540,12 @@ export const treeData = [
                                         3692580.48,
                                         2.971936950683594
                                     ],
-                                    assetPath: "/JC_CustomAssets/ParticleLibrary/Exhibition/水/喷水_1",
+                                    assetPath: "/JC_CustomAssets/ParticleLibrary/Exhibition/烟雾/烟雾_3",
                                     scale: [0.2, 0.2, 0.4],
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/管道腐蚀泄露.png'),
                                     content: '由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸',
                                     mainPoint: "由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸"
                                 }, {
@@ -1559,12 +1568,12 @@ export const treeData = [
                                         3692578.88,
                                         4.015254211425781
                                     ],
-                                    assetPath: "/JC_CustomAssets/ParticleLibrary/Exhibition/水/喷水_1",
+                                    assetPath: "/JC_CustomAssets/ParticleLibrary/Exhibition/烟雾/烟雾_3",
                                     scale: [0.2, 0.2, 0.4],
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/管道腐蚀泄露.png'),
                                     content: '由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸',
                                     mainPoint: "由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸"
                                 }, {
@@ -1587,12 +1596,12 @@ export const treeData = [
                                         3692578.88,
                                         4.015254211425781
                                     ],
-                                    assetPath: "/JC_CustomAssets/ParticleLibrary/Exhibition/水/喷水_1",
+                                    assetPath: "/JC_CustomAssets/ParticleLibrary/Exhibition/烟雾/烟雾_3",
                                     scale: [0.2, 0.2, 0.4],
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/法兰错位泄露.png'),
                                     content: '由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸',
                                     mainPoint: "由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸"
                                 }, {
@@ -1615,12 +1624,12 @@ export const treeData = [
                                         3692579.52,
                                         3.0829913330078127
                                     ],
-                                    assetPath: "/JC_CustomAssets/ParticleLibrary/Exhibition/水/喷水_1",
+                                    assetPath: "/JC_CustomAssets/ParticleLibrary/Exhibition/烟雾/烟雾_3",
                                     scale: [0.2, 0.2, 0.4],
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/管道腐蚀泄露.png'),
                                     content: '由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸',
                                     mainPoint: "由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸"
                                 }, {
@@ -1643,12 +1652,12 @@ export const treeData = [
                                         3692578.88,
                                         4.015254211425781
                                     ],
-                                    assetPath: "/JC_CustomAssets/ParticleLibrary/Exhibition/水/喷水_1",
+                                    assetPath: "/JC_CustomAssets/ParticleLibrary/Exhibition/烟雾/烟雾_3",
                                     scale: [0.2, 0.2, 0.4],
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/管道腐蚀泄露.png'),
                                     content: '由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸',
                                     mainPoint: "由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸"
                                 }, {
@@ -1671,12 +1680,12 @@ export const treeData = [
                                         3692578.88,
                                         3.790709228515625
                                     ],
-                                    assetPath: "/JC_CustomAssets/ParticleLibrary/Exhibition/水/喷水_1",
+                                    assetPath: "/JC_CustomAssets/ParticleLibrary/Exhibition/烟雾/烟雾_3",
                                     scale: [0.2, 0.2, 0.4],
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/法兰错位泄露.png'),
                                     content: '由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸',
                                     mainPoint: "由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸"
                                 }, {
@@ -1699,12 +1708,12 @@ export const treeData = [
                                         3692578.88,
                                         3.790709228515625
                                     ],
-                                    assetPath: "/JC_CustomAssets/ParticleLibrary/Exhibition/水/喷水_1",
+                                    assetPath: "/JC_CustomAssets/ParticleLibrary/Exhibition/烟雾/烟雾_3",
                                     scale: [0.2, 0.2, 0.4],
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/法兰错位泄露.png'),
                                     content: '由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸',
                                     mainPoint: "由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸"
                                 }, {
@@ -1727,12 +1736,12 @@ export const treeData = [
                                         3692578.88,
                                         3.790709228515625
                                     ],
-                                    assetPath: "/JC_CustomAssets/ParticleLibrary/Exhibition/水/喷水_1",
+                                    assetPath: "/JC_CustomAssets/ParticleLibrary/Exhibition/烟雾/烟雾_3",
                                     scale: [0.2, 0.2, 0.4],
                                     needFocus:true,
                                     // rotation:[-90,0,0],
                                     distance:3,
-                                    img: img2,
+                                    img: require('@/assets/img/view/法兰错位泄露.png'),
                                     content: '由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸',
                                     mainPoint: "由于设施老化、破裂、操作不当等原因导致石油、化学品和液化天然气泄漏，可能引发火灾或爆炸"
                                 }, {
@@ -1755,12 +1764,12 @@ export const treeData = [
                                         3692578.88,
                                         3.790709228515625
                                     ],
-                                    assetPath: "/JC_CustomAssets/ParticleLibrary/Exhibition/水/喷水_1",
+                                    assetPath: "/JC_CustomAssets/ParticleLibrary/Exhibition/烟雾/烟雾_3",
                                     scale: [0.2, 0.2, 0.4],
                                     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,
-                                    content: '泵发生火灾。',
-                                    mainPoint: "泵发生火灾。"
+                                    img: require('@/assets/img/view/槽罐车罐体起火.png'),
+                                    content: '槽罐车罐体起火。',
+                                    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: "储电站火灾。"
                                 }
diff --git a/src/utils/player.ts b/src/utils/player.ts
index 240c524..8b5ea58 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 '../assets/ac.min.js'  
+import * as acapi from '../assets/ac.min.js'
 // import acapi from 'ac.min.js'
 export default class PlayerUtils{
     public api:any;
@@ -16,7 +16,7 @@ export default class PlayerUtils{
                 onEvent: this.onEvent
             },
             ui:{
-                startupInfo:false, 
+                startupInfo:false,
                 mainUI:true
             },
 
@@ -33,7 +33,7 @@ export default class PlayerUtils{
                     onKeyUp:this.onKeyUp,
                     onKeyPress:this.onKeyPress,
                 }
-            }, 
+            },
             keyEventTarget: 'video',
         })
         this.api = player.getAPI();
@@ -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;
@@ -191,4 +191,4 @@ export default class PlayerUtils{
         }
     }
 
-}
\ No newline at end of file
+}
diff --git a/src/views/overview.component.html b/src/views/overview.component.html
index 34c50b3..3972773 100644
--- a/src/views/overview.component.html
+++ b/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">
             <!-- 首页-->
diff --git a/src/views/overview.component.scss b/src/views/overview.component.scss
index 06d80b5..4e93bf3 100644
--- a/src/views/overview.component.scss
+++ b/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;
+  }
+}
 
 
diff --git a/src/views/overview.component.ts b/src/views/overview.component.ts
index 42f34da..5caaf79 100644
--- a/src/views/overview.component.ts
+++ b/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],