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

Merge branch 'guangyin' 

# Conflicts:
#	package.json
#	src/views/base.component.ts
#	src/views/overview.component.ts
wuyanfu
guangyin 2023-06-08 11:06:48 +08:00
parent 88bee2f2a0 753e4ee6aa
commit a7dd8fba62
11 changed files with 234 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@ -16,4 +16,4 @@ VUE_APP_ALL_MENU = false
# 微前端地址
VUE_APP_REMOTES_URL="http://119.45.158.12/common/"
# 当前应用部署地址
VUE_APP_EXPOSES_URL=""
VUE_APP_EXPOSES_URL="http://192.168.2.72:8081/"

19
.env.developmentGY 100644
View File

@ -0,0 +1,19 @@
#开发环境
NODE_ENV:"development"
# 页面标题
VUE_APP_TITLE = 汉邦唐消防训练基地
# 网关地址
VUE_APP_GATEWAY_URL="/dev-api"
# UE4服务地址
VUE_APP_PALYER_URL="192.168.1.66:8080"
# 服务地址
VUE_APP_BASE_API_URL="http://192.168.2.3:8081"
# 服务前-- 请严格遵守格式 不允许换行
VUE_APP_SERVICE_PREFIX= '{"knowledge":"/knowledge","system":"/system"}'
# 是否显示全部菜单
VUE_APP_ALL_MENU = false
# 微前端地址
VUE_APP_REMOTES_URL="http://119.45.158.12/common/"
# 当前应用部署地址
VUE_APP_EXPOSES_URL="http://192.168.2.72:8081/"

1
package.json
View File

@ -5,6 +5,7 @@
"scripts": {
"serve": "vue-cli-service serve --mode development",
"local": "vue-cli-service serve --mode developmentLocal --port 8084",
"serveGY": "vue-cli-service serve --mode developmentGY",
"build": "vue-cli-service build --mode production",
"buildProdLocal": "vue-cli-service build --mode prodLocal",
"buildProd": "vue-cli-service build --mode prod",

BIN
src/assets/video/化工工艺步骤.mp4 100644
View File

Binary file not shown.

BIN
src/assets/video/外浮顶罐.mp4 100644
View File

Binary file not shown.

BIN
src/assets/video/工艺流程.mp4 100644
View File

Binary file not shown.

BIN
src/assets/video/常减压装置.mp4 100644
View File

Binary file not shown.

BIN
src/assets/video/球罐.mp4 100644
View File

Binary file not shown.

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

@ -8,7 +8,9 @@
<div class="text-con flex-0">
{{ viewRightData.data.content }}
</div>
<h3 v-show="viewRightData.data.dataList.length>0" class="sub-title flex-0">模拟火情</h3>
<h3 v-show="viewRightData.data.dataList.length>0" class="sub-title flex-0">
{{ viewRightData.data.type==='info'?'设施介绍':'模拟火情' }}
</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">

50
src/mock/treeData.ts
View File

@ -933,6 +933,16 @@ export const treeData = [
data: {
content: '油罐火灾事故处置训练设施是一种专门用于培训和演练消防人员进行油罐火灾事故处置能力的实景模拟设施。这种设施旨在提高消防人员在实际火灾事故中应对油罐火灾的技能和经验。',
dataList: [
{
id: Mock.mock("@id"),
title: '外浮顶罐介绍',
remark: '外浮顶罐介绍',
type: 'video',
model: 'video',
img: require('@/assets/img/view/密封圈火.png'),
info: require('@/assets/video/外浮顶罐.mp4'),
content: '外浮顶罐介绍'
},
{
id: Mock.mock("@id"),
rate: 1,
@ -1446,6 +1456,16 @@ export const treeData = [
data: {
content: '气罐火灾事故处置训练设施是一种专门用于培训和演练消防人员进行气罐火灾事故处置能力的实景模拟设施。这种设施旨在提高消防人员在实际火灾事故中应对油罐火灾的技能和经验。',
dataList: [
{
id: Mock.mock("@id"),
title: '球罐介绍',
remark: '球罐介绍',
type: 'video',
model: 'video',
img: require('@/assets/img/view/密封圈火.png'),
info: require('@/assets/video/球罐.mp4'),
content: '球罐介绍'
},
{
id: Mock.mock("@id"),
rate: 1,
@ -2160,8 +2180,36 @@ export const treeData = [
],
data: {
content: '模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗',
type:'info',
dataList: [
{
id: Mock.mock("@id"),
title: '常减压装置',
remark: '常减压装置',
type: 'video',
model: 'video',
img: require('@/assets/img/view/初馏塔回流罐顶火.png'),
info: require('@/assets/video/常减压装置.mp4'),
content: '常减压装置介绍'
},{
id: Mock.mock("@id"),
title: '化工工艺步骤',
remark: '化工工艺步骤',
type: 'video',
model: 'video',
img: require('@/assets/img/view/初馏塔回流罐顶火.png'),
info: require('@/assets/video/化工工艺步骤.mp4'),
content: '化工工艺步骤'
},{
id: Mock.mock("@id"),
title: '工艺流程',
remark: '工艺流程',
type: 'video',
model: 'video',
img: require('@/assets/img/view/初馏塔回流罐顶火.png'),
info: require('@/assets/video/工艺流程.mp4'),
content: '工艺流程'
},
]
},
children: []

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

@ -33,14 +33,14 @@ export default class OverViewComponent extends BaseComponent {
// 当前图层
public warnTimer = {};
//定时器
public timer:any = {};
public timer: any = {};
public currentLayers = [] as any;
// 是否展开图层
public openLayerDrawer = false;
public currentCarPeople:any = {};
public currentCarPeople: any = {};
//展示导览右侧
viewRightShow = false;
@ -61,20 +61,24 @@ export default class OverViewComponent extends BaseComponent {
public showLoading = true
public viewLayer = {} as any;
async created(){
async created() {
// this.currentLayers = this.getCurrentLayers();
}
public upDateEventList(){
public upDateEventList() {
const eventList = MockData.getEventList().data
this.$store.commit("upDateEventList",eventList)
this.$store.commit("upDateEventList", eventList)
}
public getHiddenDangrous(){
this.parkService.getHiddenDangrous().then((res:any)=>{
public getHiddenDangrous() {
this.parkService.getHiddenDangrous().then((res: any) => {
this.dataList["hidden-dangrous"] = res.data;
this.$store.commit("setHiddenDangrousList",res.data)
this.$store.commit("setHiddenDangrousList", res.data)
})
}
// 地图初始化后
public getMap(store: any) {
this.player = store;
@ -99,15 +103,15 @@ export default class OverViewComponent extends BaseComponent {
public handleChange(data) {
console.log(data)
if(data.GroupID){
const currentData = (this.layerData.find(item=>item.value === data.GroupID)as any).data.find(item=>item.id === data.Id)
if(data.GroupID==="peo"){
if (data.GroupID) {
const currentData = (this.layerData.find(item => item.value === data.GroupID) as any).data.find(item => item.id === data.Id)
if (data.GroupID === "peo") {
this.emitPersonPop(currentData)
}
if(data.GroupID==="car"){
if (data.GroupID === "car") {
this.emitCarPop(currentData)
}
if(data.GroupID==="video"){
if (data.GroupID === "video") {
// this.openVideo(currentData)
}
}
@ -115,43 +119,45 @@ export default class OverViewComponent extends BaseComponent {
//展示人员详情
emitPersonPop(item){
emitPersonPop(item) {
this.resetMap();
setTimeout(()=>{
setTimeout(() => {
this.currentCarPeople = item;
this.player.api.marker.focus(item.id,50,2);
setTimeout(()=>{
this.player.api.marker.focus(item.id, 50, 2);
setTimeout(() => {
this.bigPopTitle = '人员信息卡';
this.dialogVisibleForBigPop = true
},2000)
},1000)
}, 2000)
}, 1000)
}
//展示车辆详情
emitCarPop(item){
emitCarPop(item) {
this.resetMap();
setTimeout(()=>{
setTimeout(() => {
this.currentCarPeople = item;
this.player.api.marker.focus(item.id,50,2);
setTimeout(()=>{
this.player.api.marker.focus(item.id, 50, 2);
setTimeout(() => {
this.bigPopTitle = '车辆信息卡';
this.dialogVisibleForBigPop = true
},2000)
},1000)
}, 2000)
}, 1000)
}
closeCarPersonPop(){
closeCarPersonPop() {
this.currentCarPeople = null;
}
public navChange(data: string) {
this.currentNav = data;
if(this.player){
if (this.player) {
this.currentLayers = this.getCurrentLayers()
if(this.currentEvent ){
if (this.currentEvent) {
this.viewLayer[this.currentEvent.id].selected = false;
this.addCustom(this.viewLayer[this.currentEvent.id],true);
this.addCustom(this.viewLayer[this.currentEvent.id], true);
this.currentEvent = null;
}
if(this.currentWanning){
if (this.currentWanning) {
this.player.api.customObject.delete(this.currentWanning.id)
}
this.resetMap();
@ -173,7 +179,7 @@ export default class OverViewComponent extends BaseComponent {
fixedbtn.style.right = "540px";
layerBth.style.right = "440px";
// rightEl.classList.add("animate__slideInRight");
rightEl.forEach(item=>{
rightEl.forEach(item => {
item.classList.remove("animate__slideOutRight");
item.classList.add("animate__slideInRight");
})
@ -184,36 +190,36 @@ export default class OverViewComponent extends BaseComponent {
fixedbtn.style.right = "140px";
layerBth.style.right = "40px";
// rightEl.classList.add("animate__slideOutRight");
rightEl.forEach(item=>{
rightEl.forEach(item => {
item.classList.remove("animate__slideInRight");
item.classList.add("animate__slideOutRight");
})
}
}
public toggleAllPanel(){
public toggleAllPanel() {
this.hideAllPanel = !this.hideAllPanel;
this.drawerChange(!this.hideAllPanel)
if(!this.hideAllPanel){
if (!this.hideAllPanel) {
this.showPlay = false
this.player.api.cameraTour.stop();
this.player.api.settings.setInteractiveMode(0)
}
}
public toggleHeight(){
public toggleHeight() {
this.openLayerDrawer = !this.openLayerDrawer;
}
public toggleLayer(layer){
if(this.lock){
public toggleLayer(layer) {
if (this.lock) {
this.$message.error("视口未加载完成")
return
}
layer.selected = !layer.selected;
if(layer.type === "moveMarker"){
this.addMarker(layer,true)
}else{
if (layer.type === "moveMarker") {
this.addMarker(layer, true)
} else {
this.toggleArea(layer)
}
}
@ -223,37 +229,40 @@ export default class OverViewComponent extends BaseComponent {
// this.addWarnning(item)
this.info = item
if (this.waringRightShow){
if (this.waringRightShow) {
this.waringRightShow = false
setTimeout(()=>{
setTimeout(() => {
this.waringRightShow = true
})
}else{
} else {
this.waringRightShow = true
}
const position = item.position
this.player.api.camera.lookAt(
position[0],
position[1],
position[2],
this.player.api.camera.lookAt(
position[0],
position[1],
position[2],
0,
position[3], //pitch
position[4], //yaw
position[3], //pitch
position[4], //yaw
2
)
}
//定位坐标
changePoint(item){
changePoint(item) {
this.addWarnning(item)
}
//关闭告警详情
changeClose(){
changeClose() {
this.waringRightShow = false
this.player.api.customObject.delete(this.currentWanning.id)
}
//进入自由导览
async showView (){
async showView() {
this.toggleAllPanel();
await this.player.api.camera.lookAt(
11660670.518125,
@ -264,86 +273,87 @@ export default class OverViewComponent extends BaseComponent {
85.199608,
2
)
setTimeout(()=>{
setTimeout(() => {
this.player.api.settings.setInteractiveMode(2);
this.player.api.settings.setMainUIVisibility(false)
},2000)
}, 2000)
//todo 进入自由导览
}
//展开导览右侧
showViewRight(data){
if(data.area){
showViewRight(data) {
if (data.area) {
this.addArea(data)
}
if(data.camera){
if (data.camera) {
this.player.api.camera.lookAt(...data.camera)
}
this.viewRightData = data;
this.viewRightShow = false
setTimeout(()=>{
setTimeout(() => {
this.viewRightShow = true
})
}
//右侧详情点击事件
showDetail(item){
debugger
if(this.currentEvent){
if(this.currentEvent.id === item.id){
showDetail(item) {
if (this.currentEvent) {
if (this.currentEvent.id === item.id) {
return
}else{
} else {
this.viewLayer[this.currentEvent.id].selected = false;
this.addCustom(this.viewLayer[this.currentEvent.id],true);
this.addCustom(this.viewLayer[this.currentEvent.id], true);
this.currentEvent = null;
}
}
if(item.type === 'video'){
const currentData = (this.layerData.find(item=>item.value === "video")as any).data.find(items=>items.remark === item.title)
this.openVideo(currentData)
}else{
if(!this.viewLayer[item.id]){
if (item.type === 'video') {
const currentData = (this.layerData.find(item => item.value === "video") as any).data.find(items => items.remark === item.title)
this.openVideo(currentData ?? item)
} else {
if (!this.viewLayer[item.id]) {
const data = [] as any;
if(item.point>1){
for(let i = 0;i<item.point;i++){
if (item.point > 1) {
for (let i = 0; i < item.point; i++) {
data.push({
id:item.id+'_'+i,
position:item.position[i],
rotation:item.rotation || [0,90,0],
hasPop:item.hasPop && i===1,
id: item.id + '_' + i,
position: item.position[i],
rotation: item.rotation || [0, 90, 0],
hasPop: item.hasPop && i === 1,
})
}
}else{
} else {
data.push({
id:item.id,
position:item.position,
rotation:item.rotation || [0,90,0],
hasPop:item.hasPop
id: item.id,
position: item.position,
rotation: item.rotation || [0, 90, 0],
hasPop: item.hasPop
})
}
this.viewLayer[item.id] = {
type:"moveMarker",
assetPath:item.assetPath || "/JC_CustomAssets/ParticleLibrary/Exhibition/火/火焰_10",
value:"fire",
popData:item,
selected:true,
scale:item.scale || [1,1,1],
urls:[],
ids:[],
type: "moveMarker",
assetPath: item.assetPath || "/JC_CustomAssets/ParticleLibrary/Exhibition/火/火焰_10",
value: "fire",
popData: item,
selected: true,
scale: item.scale || [1, 1, 1],
urls: [],
ids: [],
data,
}
this.currentEvent = item;
}else{
} else {
this.viewLayer[item.id].selected = !this.viewLayer[item.id].selected;
if(this.viewLayer[item.id].selected){
if (this.viewLayer[item.id].selected) {
this.currentEvent = item;
}
}
this.addCustom(this.viewLayer[item.id],item.hasPop);
this.addCustom(this.viewLayer[item.id], item.hasPop);
}
if(item.needFocus){
if(item.look){
if (item.needFocus) {
if (item.look) {
this.player.api.camera.lookAt(
item.look[0],
item.look[1],
@ -353,109 +363,116 @@ export default class OverViewComponent extends BaseComponent {
item.look[5], //yaw
2
)
}else{
this.player.api.customObject.focus(item.id,item.distance,2)
} else {
this.player.api.customObject.focus(item.id, item.distance, 2)
}
}
}
mounted() {
}
get showBackGround(){
get showBackGround() {
let flag = this.currentNav === 'view' && !this.viewRightShow
return flag?'none':''
return flag ? 'none' : ''
}
public getCurrentLayers(){
const layers = [] as any;
this.layerData.forEach(async (item:any)=>{
if(!item.data){
public getCurrentLayers() {
const layers = [] as any;
this.layerData.forEach(async (item: any) => {
if (!item.data) {
item.data = (await item.init()).data
}
if(item.pages.includes(this.currentNav)){
if(!item.selected){
this.toggleLayer(item)
}
if (item.pages.includes(this.currentNav)) {
if (!item.selected) {
this.toggleLayer(item)
}
layers.push(item)
}else{
if(item.selected){
} else {
if (item.selected) {
this.toggleLayer(item)
}
}
})
})
return layers
}
//进入路线导览
playView(item){
playView(item) {
this.toggleAllPanel()
this.layerData.forEach(item=>{
if(item.selected){
this.layerData.forEach(item => {
if (item.selected) {
this.toggleLayer(item)
}
})
this.showPlay = true
this.player.api.cameraTour.play(item.id)
}
closeRight(){
closeRight() {
this.viewRightShow = false;
const dom = document.querySelector('div.is-current') as any;
if (dom){
if (dom) {
dom.classList.remove('is-current')
}
if(this.currentEvent ){
if (this.currentEvent) {
this.viewLayer[this.currentEvent.id].selected = false;
this.addCustom(this.viewLayer[this.currentEvent.id],true);
this.addCustom(this.viewLayer[this.currentEvent.id], true);
this.currentEvent = null;
}
}
//暂停继续
playAction(type){
playAction(type) {
this.player.api.cameraTour[type]()
}
// 打开摄像头
openVideo(item){
this.resetMap();
setTimeout(()=>{
openVideo(item) {
// this.resetMap();
setTimeout(() => {
// this.player.api.marker.focus(item.id,20,2)
if(item.model === 'video'){
setTimeout(()=>{
if (item.model === 'video') {
setTimeout(() => {
layer.open({
type:1,
shade:0,
title:item.remark,
content:`<div class="customClass">
type: 1,
shade: 0,
title: item.remark,
content: `<div class="customClass">
<video src="${item.info}" controls style="width:100%" autoplay></video>
</div>`
})
},2000)
}else{
setTimeout(()=>{
}, 500)
} else {
setTimeout(() => {
layer.open({
type:1,
shade:0,
title:item.remark,
content:`<div class="customClass"><div
style="
background: #0000008c;
color: #ffffff;
font-size: 12px;
padding: 10px;
line-height: 2;
white-space: pre-wrap;
"
>${item.info}</div></div>`
type: 1,
shade: 0,
title: item.remark,
content: `<div class="customClass"><div
style="
background: #0000008c;
color: #ffffff;
font-size: 12px;
padding: 10px;
line-height: 2;
white-space: pre-wrap;
"
>${item.info}</div></div>`
})
},2000)
}, 1000)
}
},1000)
}, 100)
}
deactivated(){
deactivated() {
//
}
beforeDestory() {
if (this.player) {
this.player = null