diff --git a/src/mock/treeData.ts b/src/mock/treeData.ts
index 85863af..4b00b29 100644
--- a/src/mock/treeData.ts
+++ b/src/mock/treeData.ts
@@ -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: []
diff --git a/src/views/overview.component.ts b/src/views/overview.component.ts
index 79478bb..55adf78 100644
--- a/src/views/overview.component.ts
+++ b/src/views/overview.component.ts
@@ -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
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:`
+ type: 1,
+ shade: 0,
+ title: item.remark,
+ content: `
`
})
- },2000)
- }else{
- setTimeout(()=>{
+ }, 500)
+ } else {
+ setTimeout(() => {
layer.open({
- type:1,
- shade:0,
- title:item.remark,
- content:`
`
+ type: 1,
+ shade: 0,
+ title: item.remark,
+ content: `
`
})
- },2000)
+ }, 1000)
}
- },1000)
+ }, 100)
}
- deactivated(){
+
+ deactivated() {
//
}
+
beforeDestory() {
if (this.player) {
this.player = null