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

feat:导览页面数据模拟

wuyanfu
guangyin 2023-05-18 14:55:46 +08:00
parent f0de2e4001
commit 27c4522b05
6 changed files with 63 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/style/pageCommon.component.scss
View File

@ -3115,3 +3115,7 @@ svg.loading-icon {
} }
} }
} }
.close-style{
font-size: 14px;
cursor: pointer;
}

10
src/components/view/right/viewRight.component.html
View File

@ -1,7 +1,8 @@
<div class="env-right emergency-part"> <div class="env-right emergency-part">
<div class="view-right-title flex-0"> <div class="view-right-title d-flex is-justify-space-between align-items-center flex-0">
{{viewRightData.label}} <span>{{viewRightData.label}}</span>
<span @click="closeRight" class="close-style"><i class="el-icon-close"></i>关闭</span>
</div> </div>
<h3 class="sub-title flex-0">训练内容</h3> <h3 class="sub-title flex-0">训练内容</h3>
<div class="text-con flex-0"> <div class="text-con flex-0">
@ -10,8 +11,9 @@
<h3 class="sub-title flex-0">模拟火情</h3> <h3 class="sub-title flex-0">模拟火情</h3>
<div class="right-view-list"> <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"> <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-if="1%2 === 0" src="~@/assets/img/view/fire.png" alt="">
<img v-else src="~@/assets/img/view/fire2.png" alt=""> <img v-else src="~@/assets/img/view/fire2.png" alt="">-->
<img :src="item.img" alt="">
<div> <div>
<p>{{item.title}}</p> <p>{{item.title}}</p>
<div class="d-flex align-items-center right-sub-text"> <div class="d-flex align-items-center right-sub-text">

5
src/components/view/right/viewRight.component.ts
View File

@ -25,6 +25,11 @@ export default class ViewRightComponent extends Vue {
showDetail(item){ showDetail(item){
// //
} }
//关闭右侧
@Emit('closeRight')
closeRight(item){
//
}
mounted() { mounted() {

68
src/mock/treeData.ts
View File

@ -1,5 +1,8 @@
const img1 = require('@/assets/img/view/fire.png')
const img2 = require('@/assets/img/view/fire2.png')
import Mock from "mockjs" import Mock from "mockjs"
export const treeData = [ export const treeData = [
{ {
id: Mock.mock("@id"), id: Mock.mock("@id"),
@ -18,7 +21,9 @@ export const treeData = [
3692443.52, 3692443.52,
67.69076171875 67.69076171875
], ],
img:img1,
content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
}, { }, {
id: Mock.mock("@id"), id: Mock.mock("@id"),
rate: 2, rate: 2,
@ -29,6 +34,7 @@ export const treeData = [
3692452.8000000003, 3692452.8000000003,
21.751074218750002 21.751074218750002
], ],
img:img2,
content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗" mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
}, { }, {
@ -49,6 +55,7 @@ export const treeData = [
3692580.8000000003, 3692580.8000000003,
21.94720703125 21.94720703125
]], ]],
img:img1,
content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗" mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
}, { }, {
@ -61,6 +68,7 @@ export const treeData = [
3692514.24, 3692514.24,
13.2171923828125 13.2171923828125
], ],
img:img2,
content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗" mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
}, { }, {
@ -73,6 +81,7 @@ export const treeData = [
3692601.6, 3692601.6,
2.3062506103515625 2.3062506103515625
], ],
img:img1,
content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗', content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗" mainPoint:"模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗"
} }
@ -100,7 +109,8 @@ export const treeData = [
11660769.28, 11660769.28,
3692443.52, 3692443.52,
67.69076171875 67.69076171875
] ],
img:img1,
}, { }, {
id: Mock.mock("@id"), id: Mock.mock("@id"),
rate: 2, rate: 2,
@ -110,7 +120,8 @@ export const treeData = [
11660674.56, 11660674.56,
3692452.8000000003, 3692452.8000000003,
21.751074218750002 21.751074218750002
] ],
img:img2,
}, { }, {
id: Mock.mock("@id"), id: Mock.mock("@id"),
rate: 4, rate: 4,
@ -128,7 +139,8 @@ export const treeData = [
11660860.16, 11660860.16,
3692580.8000000003, 3692580.8000000003,
21.94720703125 21.94720703125
]] ]],
img:img1,
}, { }, {
id: Mock.mock("@id"), id: Mock.mock("@id"),
rate: 3, rate: 3,
@ -138,7 +150,8 @@ export const treeData = [
11661059.84, 11661059.84,
3692514.24, 3692514.24,
13.2171923828125 13.2171923828125
] ],
img:img2
}, { }, {
id: Mock.mock("@id"), id: Mock.mock("@id"),
rate: 4, rate: 4,
@ -148,13 +161,9 @@ export const treeData = [
11661043.200000001, 11661043.200000001,
3692599.68, 3692599.68,
9.2683056640625 9.2683056640625
] ],
}, { img:img1,
id: Mock.mock("@id"), }
rate: 2,
title: '顶层沸溢火',
point: '5',
},
] ]
}, },
children: [] children: []
@ -172,7 +181,8 @@ export const treeData = [
11660769.28, 11660769.28,
3692443.52, 3692443.52,
67.69076171875 67.69076171875
] ],
img:img1,
}, { }, {
id: Mock.mock("@id"), id: Mock.mock("@id"),
rate: 2, rate: 2,
@ -182,7 +192,8 @@ export const treeData = [
11660674.56, 11660674.56,
3692452.8000000003, 3692452.8000000003,
21.751074218750002 21.751074218750002
] ],
img:img2,
}, { }, {
id: Mock.mock("@id"), id: Mock.mock("@id"),
rate: 4, rate: 4,
@ -200,7 +211,8 @@ export const treeData = [
11660860.16, 11660860.16,
3692580.8000000003, 3692580.8000000003,
21.94720703125 21.94720703125
]] ]],
img:img1,
}, { }, {
id: Mock.mock("@id"), id: Mock.mock("@id"),
rate: 3, rate: 3,
@ -210,7 +222,8 @@ export const treeData = [
11661059.84, 11661059.84,
3692514.24, 3692514.24,
13.2171923828125 13.2171923828125
] ],
img:img2,
}, { }, {
id: Mock.mock("@id"), id: Mock.mock("@id"),
rate: 4, rate: 4,
@ -220,13 +233,9 @@ export const treeData = [
11661043.200000001, 11661043.200000001,
3692599.68, 3692599.68,
9.2683056640625 9.2683056640625
] ],
}, { img:img1,
id: Mock.mock("@id"), }
rate: 2,
title: '顶层沸溢火',
point: '5',
},
] ]
}, },
children: [] children: []
@ -248,7 +257,8 @@ export const treeData = [
11660769.28, 11660769.28,
3692443.52, 3692443.52,
67.69076171875 67.69076171875
] ],
img:img1
}, { }, {
id: Mock.mock("@id"), id: Mock.mock("@id"),
rate: 2, rate: 2,
@ -258,7 +268,8 @@ export const treeData = [
11660674.56, 11660674.56,
3692452.8000000003, 3692452.8000000003,
21.751074218750002 21.751074218750002
] ],
img:img2
}, { }, {
id: Mock.mock("@id"), id: Mock.mock("@id"),
rate: 4, rate: 4,
@ -276,7 +287,8 @@ export const treeData = [
11660860.16, 11660860.16,
3692580.8000000003, 3692580.8000000003,
21.94720703125 21.94720703125
]] ]],
img:img1
}, { }, {
id: Mock.mock("@id"), id: Mock.mock("@id"),
rate: 3, rate: 3,
@ -286,7 +298,8 @@ export const treeData = [
11661059.84, 11661059.84,
3692514.24, 3692514.24,
13.2171923828125 13.2171923828125
] ],
img:img2
}, { }, {
id: Mock.mock("@id"), id: Mock.mock("@id"),
rate: 4, rate: 4,
@ -296,7 +309,8 @@ export const treeData = [
11661043.200000001, 11661043.200000001,
3692599.68, 3692599.68,
9.2683056640625 9.2683056640625
] ],
img:img1
}, },
] ]
}, },

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

@ -1,6 +1,6 @@
<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">
@ -19,7 +19,7 @@
<HomeRightComponent v-if="currentNav === 'home'" <HomeRightComponent v-if="currentNav === 'home'"
class="animate__animated animate__fadeInRight"></HomeRightComponent> class="animate__animated animate__fadeInRight"></HomeRightComponent>
<!-- 导览--> <!-- 导览-->
<ViewRightComponent :viewRightData="viewRightData" @showDetail="showDetail" v-if="currentNav === 'view' && viewRightShow" class="animate__animated animate__fadeInLeft"></ViewRightComponent> <ViewRightComponent @closeRight="closeRight" :viewRightData="viewRightData" @showDetail="showDetail" v-if="currentNav === 'view' && viewRightShow" class="animate__animated animate__fadeInLeft"></ViewRightComponent>
<!-- 运营管理--> <!-- 运营管理-->
<ManageRightComponent v-if="currentNav === 'manage'" class="animate__animated animate__fadeInLeft"></ManageRightComponent> <ManageRightComponent v-if="currentNav === 'manage'" class="animate__animated animate__fadeInLeft"></ManageRightComponent>
</div> </div>

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

@ -248,6 +248,10 @@ export default class OverViewComponent extends BaseComponent {
console.log(item) console.log(item)
this.player.api.cameraTour.play(item.id) this.player.api.cameraTour.play(item.id)
} }
closeRight(){
this.viewRightShow = false
console.log('关闭右侧')
}
deactivated(){ deactivated(){
console.log(123) console.log(123)