From fb20e164c7f8c03e7b5878b5c8ff85374ebe7909 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E5=BB=B6=E7=A6=8F?= <> Date: Wed, 17 May 2023 15:52:16 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E5=9C=B0=E5=9B=BE?= =?UTF-8?q?=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/map.component.vue | 4 +- src/mock/index.ts | 10 +- src/mock/layer.ts | 21 +++- src/store/index.ts | 30 +----- src/utils/player.ts | 16 ++- src/views/base.component.ts | 170 +++++++++++++++++++++++++++--- src/views/overview.component.html | 2 +- src/views/overview.component.ts | 30 +++--- 8 files changed, 212 insertions(+), 71 deletions(-) diff --git a/src/components/map.component.vue b/src/components/map.component.vue index 61750c2..422b2c4 100644 --- a/src/components/map.component.vue +++ b/src/components/map.component.vue @@ -58,8 +58,8 @@ export default class MapComponent extends Vue { } mounted(){ window.addEventListener("resize",this.resize) - document.addEventListener("mousemove", this.fixedCamera) - this.player = this.playerUtils.initPlayer(this.id); + // document.addEventListener("mousemove", this.fixedCamera) + this.player = this.playerUtils.initPlayer(this.id,"2423385884355"); this.playerApi = this.player.getAPI(); } diff --git a/src/mock/index.ts b/src/mock/index.ts index b4b8df6..6f281f9 100644 --- a/src/mock/index.ts +++ b/src/mock/index.ts @@ -18,7 +18,10 @@ export class MockData{ id:Mock.mock("@id"), name:Mock.mock("@cname"), job:"安全顾问", - position:turf.randomPosition([119.588709 ,34.514257,119.596724,34.520382]), + position:turf.randomPosition([ + 11660757, 3692398.75, + 11661124, 3692643.5 + ]), time:moment().subtract(Math.floor(Math.random()*30),"minutes").format("YYYY-MM-DD HH:mm:ss"), tel:Mock.mock("@integer(13200000000, 13299999999)") }) @@ -501,7 +504,10 @@ export class MockData{ time:moment().subtract(Math.floor(Math.random()*30),"minutes").format("YYYY-MM-DD HH:mm:ss"), startTime : "7:00", endTime : "8:00", - position:turf.randomPosition([119.588709 ,34.514257,119.596724,34.520382]), + position:turf.randomPosition([ + 11660757, 3692398.75, + 11661124, 3692643.5 + ]), plate:plateList[i%5], remark:typeList[i%3], type:i%2 diff --git a/src/mock/layer.ts b/src/mock/layer.ts index 6e4d664..13966f5 100644 --- a/src/mock/layer.ts +++ b/src/mock/layer.ts @@ -18,23 +18,34 @@ enum COLOR{ // 四色图-红 RED="#FF5959" } +import CloseService from "@/service/close.service"; +import ParkFileService from "@/service/park.service"; +import Vue from "vue"; +const service = new CloseService(); +const parkService = new ParkFileService() +const glob = new Vue(); export default [ { name:"电子围栏", ids:[] as string[], type:"area", value:"bounds", color:COLOR.BOUNDS, + init:async ()=>{ + return await parkService.getRealBounds() + }, selected:false, pages:["manage"] },{ name:"人员定位", ids:[] as string[], type:"moveMarker", + init:async ()=>{ + return await service.getPeopleList() + }, value:"peo", url: "@path:people.png", - pakFilePath: "@path:DTS_Library_V5.4.pak", assetPath:"/JC_CustomAssets/VehicleLibrary/Exhibition/重型货车_01", - coordinateType:1, + scale:[0,0,0], selected:false, pages:["home","view"] },{ @@ -42,14 +53,16 @@ export default [ { ids:[] as string[], type:"moveMarker", value:"car", - pakFilePath: "@path:DTS_Library_V5.4.pak", assetPath:"/JC_CustomAssets/VehicleLibrary/Exhibition/重型货车_01", urls:[ "@path:car.png", "@path:d-car.png", "@path:d-car.png", ], - coordinateType:1, + init:async ()=>{ + return await service.getCarList() + }, + scale:[0,0,0], selected:false, pages:["home","view"] }] diff --git a/src/store/index.ts b/src/store/index.ts index 80c9b8a..91497c8 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -17,6 +17,7 @@ export default new Vuex.Store({ specialEnvList:[], dangrousList:[], safeGoods:[], + boundsData:[] }, getters: { }, @@ -24,39 +25,14 @@ export default new Vuex.Store({ setPeopleList(state,data){ state.peopleList = data; }, - setCompanyList(state,data){ - state.companyList = data; - }, setCarList(state,data){ state.carList = data; }, setCameraList(state,data){ state.cameraList = data; }, - upDateWaringList(state:any,data){ - state.warningList = [...data,...state.warningList]; - - }, - setHiddenDangrousList(state:any,data){ - state.hiddenDangrousList = data; - }, - setDangrousWorkList(state:any,data){ - state.dangrousWorkList = data; - }, - setGroundEnvList(state:any,data){ - state.groundEnvList = data; - }, - setSpecialEnvList(state:any,data){ - state.specialEnvList = data; - }, - upDateEventList(state:any,data){ - state.eventList = [...data,...state.eventList]; - }, - setDangrousList(state:any,data){ - state.dangrousList = data; - }, - setSafeGoods(state:any,data){ - state.safeGoods = data; + setBoundsData(state,data){ + state.boundsData = data; }, }, actions: { diff --git a/src/utils/player.ts b/src/utils/player.ts index 4b8d304..edb91b8 100644 --- a/src/utils/player.ts +++ b/src/utils/player.ts @@ -5,9 +5,10 @@ import * as acapi from '../../public/ac.min.js' // import acapi from 'ac.min.js' export default class PlayerUtils{ public api:any; - public initPlayer(domId){ + public initPlayer(domId,iid?){ const player = new acapi.DigitalTwinPlayer(process.env.VUE_APP_PALYER_URL,{ domId, + iid, // reset:true, apiOptions:{ onReady: this.onReady, @@ -52,8 +53,10 @@ export default class PlayerUtils{ public onMouseLeave :any= null; public onMouseMove :any= null; public onMouseDown :any= null; - public onMouseUp :any= (data)=>{ - console.log(data) + public onMouseUp :any= (res)=>{ + this.api.camera.get((data)=>{ + console.log(data) + }) };; public onKeyDown :any= null; public onKeyUp :any= null; @@ -123,12 +126,15 @@ export default class PlayerUtils{ * @returns 经纬度 lon,lat] */ - public getLonLat(coordinates,coordinateType?,fn?){ + public async getLonLat(coordinates,coordinateType?,fn?){ if(!coordinateType){ // 1 84坐标系 2 GCJ02 3 BD09 coordinateType=1; } - const result = this.api.coord.pcs2gcs(coordinates,coordinateType,fn) + if(!coordinates[2]){ + coordinates[2] = 0 + } + const result = await this.api.coord.pcs2gcs(coordinates,coordinateType,fn) if(result.resultMessage==="OK"){ return result.coordinates }else{ diff --git a/src/views/base.component.ts b/src/views/base.component.ts index 62600f0..bbbdbbb 100644 --- a/src/views/base.component.ts +++ b/src/views/base.component.ts @@ -46,19 +46,13 @@ export default class BaseComponent extends Vue { return } this.player.api.camera.lookAt( - 13312716.658437, - 4098255.982695, - 60.714346, + 11660869.788125, + 3692656.110371, + 194.028672, 0, - -20, - -45 + -59.638443, + 63.604168 ) - // this.player.api.camera.get((res)=>{ - // console.log(res) - // }) - - // return await this.player.api.tileLayer.focus("48D390964B7F0D37D07DD8A2D5596E64",330,time) - } // 添加电子围栏 // 安全线 // 实控线 // 规划线 @@ -90,6 +84,152 @@ export default class BaseComponent extends Vue { } } + public async addMarker(layer,trackCustom?){ + if(!layer.ids.length){ + const options = layer.data.map((item,index)=>{ + return { + id:item.id, + groupId:layer.value, + coordinate:item.position, + coordinateType:layer.coordinateType?layer.coordinateType:0, + displayMode:2, + imagePath:layer.url || layer.urls[item.type], + imageSize:[48,48], + // popupURL:"http://192.168.1.20:8080/#/popup?"+new URLSearchParams(item), + lineSize:[2,40], + useTextAnimation: false, + lineOffset:[24,0], + autoHeight:true, + } + }) + this.player.api.marker.add(options,(data)=>{ + if(data.resultMessage==="OK"){ + if(trackCustom){ + this.player.api.marker.setAttachCustomObject(options.map(item=>{ + layer.ids.push(item.id); + return{ + markerId: item.id, //标注id + objectId: item.id, //自定义对象id + offset: [0, 0, 0] //偏移量 + } + })); + // this.player.api.customObject.moveTo(layer.data.map(async(item)=>{ + // const position = (await this.player.utils.getLonLat(item.position))[0] + // const newPosition = turf.destination(turf.point(position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates + // const newLocation = (await this.player.utils.getPosition(newPosition))[0]; + // if(!newLocation[2]){ + // newLocation[2] = 0 + // } + // console.log(item.id,item.position,newLocation) + // return { + // id:item.id, + // location:newLocation, + // "smoothTime": 5 + // } + // }),(data)=>{ + // console.log(data) + // }) + + // this.timerList[layer.value] = setInterval(()=>{ + // this.player.api.customObject.moveTo(layer.data.map(async(item)=>{ + // const position = (await this.player.utils.getLonLat(item.position))[0] + // const newPosition = turf.destination(turf.point(position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates + // const newLocation = (await this.player.utils.getPosition(newPosition))[0]; + // if(!newLocation[2]){ + // newLocation[2] = 0 + // } + // console.log(item.id,item.position,newLocation) + // return { + // id:item.id, + // location:newLocation, + // "smoothTime": 5 + // } + // }),(data)=>{ + // console.log(data) + // }) + // },5000) + }else{ + layer.ids = options.map(item=>item.id); + } + } + }) + }else{ + if(layer.selected){ + this.player.api.marker.show(layer.ids) + if(trackCustom){ + // this.player.api.customObject.moveTo(layer.data.map(async(item)=>{ + // const position = (await this.player.utils.getLonLat(item.position))[0] + // const newPosition = turf.destination(turf.point(position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates + // const newLocation = (await this.player.utils.getPosition(newPosition))[0]; + // if(!newLocation[2]){ + // newLocation[2] = 0 + // } + // return { + // id:item.id, + // location:newLocation, + // "smoothTime": 5 + // } + // })) + + // this.timerList[layer.value] = setInterval(()=>{ + // this.player.api.customObject.moveTo(layer.data.map(async(item)=>{ + // const position = (await this.player.utils.getLonLat(item.position))[0] + // const newPosition = turf.destination(turf.point(position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates + // const newLocation = (await this.player.utils.getPosition(newPosition))[0]; + // if(!newLocation[2]){ + // newLocation[2] = 0 + // } + // return { + // id:item.id, + // location:newLocation, + // "smoothTime": 5 + // } + // })) + // },5000) + } + }else{ + if(trackCustom){ + clearInterval(this.timerList[layer.value]); + this.timerList[layer.value] = null; + } + this.player.api.marker.hide(layer.ids) + } + } + } + + public addCustom(layer,needMarker?){ + if(!layer.ids.length){ + const options = layer.data.map((item,index)=>{ + return { + id:item.id, + groupId:layer.value, + pakFilePath:this.pakFilePath, + assetPath:layer.assetPath, + location:item.position, + smoothMotion:1, + scale:layer.scale, + rotation:[0,90,0] + } + }) + this.player.api.customObject.add(options,(data)=>{ + if(data.resultMessage==="OK"){ + if(needMarker){ + this.addMarker(layer,needMarker) + }else{ + layer.ids = options.map(item=>item.id) + } + } + }) + }else{ + if(layer.selected){ + this.player.api.customObject.show(layer.ids) + }else{ + this.player.api.customObject.hide(layer.ids) + } + } + + } + public onFocus(data){ this.player.api[data.type].focus(data.id) @@ -105,7 +245,13 @@ export default class BaseComponent extends Vue { // } destroyed(){ - // + this.layerData.forEach(item=>{ + if(this.timerList[item.value]){ + clearInterval(this.timerList[item.value]); + this.timerList[item.value] = null; + } + + }) } diff --git a/src/views/overview.component.html b/src/views/overview.component.html index 132c1cb..76107fe 100644 --- a/src/views/overview.component.html +++ b/src/views/overview.component.html @@ -1,6 +1,6 @@
- +
diff --git a/src/views/overview.component.ts b/src/views/overview.component.ts index 8373e1d..be04703 100644 --- a/src/views/overview.component.ts +++ b/src/views/overview.component.ts @@ -27,8 +27,8 @@ export default class OverViewComponent extends BaseComponent { public openLayerDrawer = false; // 是否隐藏除地图外所有板块 public hideAllPanel = false; - created(){ - this.currentLayers = this.getCurrentLayers() + async created(){ + // this.currentLayers = this.getCurrentLayers(); } public upDateEventList(){ const eventList = MockData.getEventList().data @@ -40,19 +40,6 @@ export default class OverViewComponent extends BaseComponent { this.$store.commit("setHiddenDangrousList",res.data) }) } - // 获取车辆 - public getCarList(){ - this.closeService.getCarList().then((res)=>{ - this.dataList["car"] = res.data; - this.$store.commit("setCarList",res.data) - }) - }// 获取车辆 - public getPersonList(){ - this.closeService.getPeopleList().then((res)=>{ - this.dataList["peo"] = res.data; - this.$store.commit("setPeopleList",res.data) - }) - } // 地图初始化后 public getMap(store: any) { this.player = store; @@ -69,15 +56,15 @@ export default class OverViewComponent extends BaseComponent { } public handleChange(data) { + console.log(data) if(data.GroupID){ - const currentData = this.dataList[data.GroupID].find(item=>item.id === data.Id); } } public navChange(data: string) { this.currentNav = data; - this.currentLayers = this.getCurrentLayers() if(this.player){ + this.currentLayers = this.getCurrentLayers() this.resetMap(); } console.log('当前点击导航', data) @@ -129,6 +116,9 @@ export default class OverViewComponent extends BaseComponent { return } layer.selected = !layer.selected; + if(layer.type === "moveMarker"){ + this.addMarker(layer,true) + } } @@ -140,7 +130,10 @@ export default class OverViewComponent extends BaseComponent { public getCurrentLayers(){ const layers = [] as any; - this.layerData.forEach((item: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) @@ -152,6 +145,7 @@ export default class OverViewComponent extends BaseComponent { } } }) + console.log(layers) return layers } From c9a45ca8f6dc09185670b252788ebe788f44eaaa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E5=BB=B6=E7=A6=8F?= <> Date: Wed, 17 May 2023 16:48:12 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E8=87=AA=E7=94=B1?= =?UTF-8?q?=E5=AF=BC=E8=A7=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mock/index.ts | 4 +- src/views/base.component.ts | 130 ++++++++++++++++---------------- src/views/overview.component.ts | 33 ++++++-- 3 files changed, 94 insertions(+), 73 deletions(-) diff --git a/src/mock/index.ts b/src/mock/index.ts index 6f281f9..9201219 100644 --- a/src/mock/index.ts +++ b/src/mock/index.ts @@ -13,7 +13,7 @@ import dangrous from "./dangrous"; export class MockData{ public static getPeopleList(){ const data = [] as any; - for(let i=0;i<100;i++){ + for(let i=0;i<50;i++){ data.push({ id:Mock.mock("@id"), name:Mock.mock("@cname"), @@ -498,7 +498,7 @@ export class MockData{ const plateList = ["苏A7E8U6","苏A3X4K5","苏J8868P","苏A7E8U6","苏A9H2K0"]; const typeList = ["罐车","挂车","油车"]; const data = [] as any; - for(let i=0;i<20;i++){ + for(let i=0;i<10;i++){ data.push({ id:Mock.mock("@id"), time:moment().subtract(Math.floor(Math.random()*30),"minutes").format("YYYY-MM-DD HH:mm:ss"), diff --git a/src/views/base.component.ts b/src/views/base.component.ts index bbbdbbb..3ee7eb4 100644 --- a/src/views/base.component.ts +++ b/src/views/base.component.ts @@ -105,49 +105,48 @@ export default class BaseComponent extends Vue { this.player.api.marker.add(options,(data)=>{ if(data.resultMessage==="OK"){ if(trackCustom){ - this.player.api.marker.setAttachCustomObject(options.map(item=>{ - layer.ids.push(item.id); + this.player.api.marker.setAttachCustomObject(layer.data.map(item=>{ return{ markerId: item.id, //标注id objectId: item.id, //自定义对象id offset: [0, 0, 0] //偏移量 } - })); - // this.player.api.customObject.moveTo(layer.data.map(async(item)=>{ - // const position = (await this.player.utils.getLonLat(item.position))[0] - // const newPosition = turf.destination(turf.point(position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates - // const newLocation = (await this.player.utils.getPosition(newPosition))[0]; - // if(!newLocation[2]){ - // newLocation[2] = 0 - // } - // console.log(item.id,item.position,newLocation) - // return { - // id:item.id, - // location:newLocation, - // "smoothTime": 5 - // } - // }),(data)=>{ - // console.log(data) - // }) + }),(res)=>{ + console.log(res) + }); + this.player.api.customObject.moveTo(layer.data.map(async(item)=>{ + const position = (await this.player.utils.getLonLat(item.position))[0] + const newPosition = turf.destination(turf.point(position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates + const newLocation = (await this.player.utils.getPosition(newPosition))[0]; + if(!newLocation[2]){ + newLocation[2] = 0 + } + return { + id:item.id, + location:newLocation, + "smoothTime": 5 + } + }),(data)=>{ + console.log(data) + }) - // this.timerList[layer.value] = setInterval(()=>{ - // this.player.api.customObject.moveTo(layer.data.map(async(item)=>{ - // const position = (await this.player.utils.getLonLat(item.position))[0] - // const newPosition = turf.destination(turf.point(position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates - // const newLocation = (await this.player.utils.getPosition(newPosition))[0]; - // if(!newLocation[2]){ - // newLocation[2] = 0 - // } - // console.log(item.id,item.position,newLocation) - // return { - // id:item.id, - // location:newLocation, - // "smoothTime": 5 - // } - // }),(data)=>{ - // console.log(data) - // }) - // },5000) + this.timerList[layer.value] = setInterval(()=>{ + this.player.api.customObject.moveTo(layer.data.map(async(item)=>{ + const position = (await this.player.utils.getLonLat(item.position))[0] + const newPosition = turf.destination(turf.point(position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates + const newLocation = (await this.player.utils.getPosition(newPosition))[0]; + if(!newLocation[2]){ + newLocation[2] = 0 + } + return { + id:item.id, + location:newLocation, + "smoothTime": 5 + } + }),(data)=>{ + console.log(data) + }) + },5000) }else{ layer.ids = options.map(item=>item.id); } @@ -157,35 +156,35 @@ export default class BaseComponent extends Vue { if(layer.selected){ this.player.api.marker.show(layer.ids) if(trackCustom){ - // this.player.api.customObject.moveTo(layer.data.map(async(item)=>{ - // const position = (await this.player.utils.getLonLat(item.position))[0] - // const newPosition = turf.destination(turf.point(position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates - // const newLocation = (await this.player.utils.getPosition(newPosition))[0]; - // if(!newLocation[2]){ - // newLocation[2] = 0 - // } - // return { - // id:item.id, - // location:newLocation, - // "smoothTime": 5 - // } - // })) + this.player.api.customObject.moveTo(layer.data.map(async(item)=>{ + const position = (await this.player.utils.getLonLat(item.position))[0] + const newPosition = turf.destination(turf.point(position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates + const newLocation = (await this.player.utils.getPosition(newPosition))[0]; + if(!newLocation[2]){ + newLocation[2] = 0 + } + return { + id:item.id, + location:newLocation, + "smoothTime": 5 + } + })) - // this.timerList[layer.value] = setInterval(()=>{ - // this.player.api.customObject.moveTo(layer.data.map(async(item)=>{ - // const position = (await this.player.utils.getLonLat(item.position))[0] - // const newPosition = turf.destination(turf.point(position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates - // const newLocation = (await this.player.utils.getPosition(newPosition))[0]; - // if(!newLocation[2]){ - // newLocation[2] = 0 - // } - // return { - // id:item.id, - // location:newLocation, - // "smoothTime": 5 - // } - // })) - // },5000) + this.timerList[layer.value] = setInterval(()=>{ + this.player.api.customObject.moveTo(layer.data.map(async(item)=>{ + const position = (await this.player.utils.getLonLat(item.position))[0] + const newPosition = turf.destination(turf.point(position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates + const newLocation = (await this.player.utils.getPosition(newPosition))[0]; + if(!newLocation[2]){ + newLocation[2] = 0 + } + return { + id:item.id, + location:newLocation, + "smoothTime": 5 + } + })) + },5000) } }else{ if(trackCustom){ @@ -214,6 +213,7 @@ export default class BaseComponent extends Vue { this.player.api.customObject.add(options,(data)=>{ if(data.resultMessage==="OK"){ if(needMarker){ + console.log(data) this.addMarker(layer,needMarker) }else{ layer.ids = options.map(item=>item.id) diff --git a/src/views/overview.component.ts b/src/views/overview.component.ts index f4595a9..afbf9e0 100644 --- a/src/views/overview.component.ts +++ b/src/views/overview.component.ts @@ -56,6 +56,7 @@ export default class OverViewComponent extends BaseComponent { this.player.api.polygon3d.clear(); this.player.api.marker.clear(); this.player.api.marker3d.clear(); + this.player.api.settings.setInteractiveMode(0); this.player.api.polyline.clear(); this.player.api.heatmap.clear(); this.currentLayers = this.getCurrentLayers(); @@ -109,8 +110,12 @@ export default class OverViewComponent extends BaseComponent { } public toggleAllPanel(){ - this.hideAllPanel = true; - this.drawerChange(false) + this.hideAllPanel = !this.hideAllPanel; + this.drawerChange(!this.hideAllPanel) + if(!this.hideAllPanel){ + + this.player.api.settings.setInteractiveMode(0) + } } public toggleHeight(){ @@ -124,11 +129,25 @@ export default class OverViewComponent extends BaseComponent { } layer.selected = !layer.selected; if(layer.type === "moveMarker"){ - this.addMarker(layer,true) + this.addCustom(layer,true) } } //进入自由导览 showView(){ + this.toggleAllPanel(); + this.player.api.camera.lookAt( + 11660667.474375, + 3692632.815, + 11.3054, + 0, + -0.822798, + 88.42289, + 2, + ()=>{ + this.player.api.settings.setInteractiveMode(1); + this.player.api.settings.setMainUIVisibility(false) + }) + //todo 进入自由导览 } //展开导览右侧 @@ -177,9 +196,11 @@ export default class OverViewComponent extends BaseComponent { } - - - destroyed() { + + deactivated(){ + console.log(123) + } + beforeDestory() { if (this.player) { this.player = null }