344 lines
10 KiB
TypeScript
344 lines
10 KiB
TypeScript
import {Component} from 'vue-property-decorator';
|
|
|
|
import {MockData} from "@/mock";
|
|
|
|
import layer from "layui-layer"
|
|
import BaseComponent from "./base.component"
|
|
import HomeLeftComponent from "@/components/home/left/homeLeft.component";
|
|
import HomeRightComponent from "@/components/home/right/homeRight.component";
|
|
import ViewLeftComponent from "@/components/view/left/viewLeft.component";
|
|
import ViewRightComponent from "@/components/view/right/viewRight.component";
|
|
import ManageLeftComponent from "@/components/manage/left/manageLeft.component";
|
|
import ManageRightComponent from "@/components/manage/right/manageRight.component";
|
|
import PermitPopUpComponent from "@/components/permitPopUp.component.vue";
|
|
|
|
|
|
|
|
@Component({
|
|
components: {
|
|
HomeLeftComponent,
|
|
HomeRightComponent,
|
|
ViewLeftComponent,
|
|
ViewRightComponent,
|
|
ManageLeftComponent,
|
|
ManageRightComponent,
|
|
PermitPopUpComponent
|
|
}
|
|
})
|
|
export default class OverViewComponent extends BaseComponent {
|
|
//当前菜单
|
|
public currentNav = 'home';
|
|
// 当前图层
|
|
public warnTimer = {};
|
|
|
|
public currentLayers = [] as any;
|
|
|
|
// 是否展开图层
|
|
public openLayerDrawer = false;
|
|
|
|
public currentCarPeople:any = {};
|
|
//展示导览右侧
|
|
viewRightShow = false;
|
|
|
|
dialogVisibleForBigPop = false;
|
|
|
|
bigPopTitle = '人员信息卡'
|
|
//默认打开的折叠面板
|
|
activeNames = ['1']
|
|
|
|
// 是否隐藏除地图外所有板块
|
|
public hideAllPanel = false;
|
|
public viewRightData = {};
|
|
|
|
|
|
public viewLayer = {} as any;
|
|
async created(){
|
|
// this.currentLayers = this.getCurrentLayers();
|
|
}
|
|
public upDateEventList(){
|
|
const eventList = MockData.getEventList().data
|
|
this.$store.commit("upDateEventList",eventList)
|
|
}
|
|
public getHiddenDangrous(){
|
|
this.parkService.getHiddenDangrous().then((res:any)=>{
|
|
this.dataList["hidden-dangrous"] = res.data;
|
|
this.$store.commit("setHiddenDangrousList",res.data)
|
|
})
|
|
}
|
|
// 地图初始化后
|
|
public getMap(store: any) {
|
|
this.player = store;
|
|
this.lock = false
|
|
this.resetMap();
|
|
this.player.api.cameraTour.delete("1");
|
|
this.player.api.cameraTour.delete("2");
|
|
this.player.api.customObject.clear();
|
|
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();
|
|
this.player.api.cameraTour.add(this.tourPathData)
|
|
// this.tourPathData.forEach((item)=>{
|
|
// })
|
|
|
|
}
|
|
|
|
public handleChange(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"){
|
|
this.emitPersonPop(currentData)
|
|
}
|
|
if(data.GroupID==="car"){
|
|
this.emitCarPop(currentData)
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//展示人员详情
|
|
emitPersonPop(item){
|
|
this.resetMap();
|
|
setTimeout(()=>{
|
|
this.currentCarPeople = item;
|
|
this.player.api.marker.focus(item.id,50,2);
|
|
setTimeout(()=>{
|
|
this.bigPopTitle = '人员信息卡';
|
|
this.dialogVisibleForBigPop = true
|
|
},2000)
|
|
},1000)
|
|
}
|
|
//展示车辆详情
|
|
emitCarPop(item){
|
|
this.resetMap();
|
|
setTimeout(()=>{
|
|
this.currentCarPeople = item;
|
|
this.player.api.marker.focus(item.id,50,2);
|
|
setTimeout(()=>{
|
|
this.bigPopTitle = '车辆信息卡';
|
|
this.dialogVisibleForBigPop = true
|
|
},2000)
|
|
},1000)
|
|
}
|
|
closeCarPersonPop(){
|
|
this.currentCarPeople = null;
|
|
}
|
|
|
|
public navChange(data: string) {
|
|
this.currentNav = data;
|
|
if(this.player){
|
|
this.currentLayers = this.getCurrentLayers()
|
|
if(this.currentEvent ){
|
|
this.viewLayer[this.currentEvent.id].selected = false;
|
|
this.addCustom(this.viewLayer[this.currentEvent.id],true);
|
|
this.currentEvent = null;
|
|
}
|
|
if(this.currentWanning){
|
|
this.player.api.customObject.delete(this.currentWanning.id)
|
|
}
|
|
this.resetMap();
|
|
}
|
|
}
|
|
|
|
|
|
public drawerChange(data) {
|
|
const fixedbtn = document.querySelector(".fixed-btn") as any;
|
|
const layerBth = document.querySelector(".layer-btn-box") as any;
|
|
const leftEl = document.querySelector(".left") as any;
|
|
const rightEl = document.querySelectorAll(".right") as any;
|
|
if (data) {
|
|
leftEl.classList.remove("animate__slideOutLeft");
|
|
// rightEl.classList.remove("animate__slideOutRight");
|
|
leftEl.classList.add("animate__slideInLeft");
|
|
fixedbtn.style.right = "540px";
|
|
layerBth.style.right = "440px";
|
|
// rightEl.classList.add("animate__slideInRight");
|
|
rightEl.forEach(item=>{
|
|
item.classList.remove("animate__slideOutRight");
|
|
item.classList.add("animate__slideInRight");
|
|
})
|
|
} else {
|
|
leftEl.classList.remove("animate__slideInLeft");
|
|
// rightEl.classList.remove("animate__slideInRight");
|
|
leftEl.classList.add("animate__slideOutLeft");
|
|
fixedbtn.style.right = "140px";
|
|
layerBth.style.right = "40px";
|
|
// rightEl.classList.add("animate__slideOutRight");
|
|
rightEl.forEach(item=>{
|
|
item.classList.remove("animate__slideInRight");
|
|
item.classList.add("animate__slideOutRight");
|
|
})
|
|
}
|
|
}
|
|
|
|
public toggleAllPanel(){
|
|
this.hideAllPanel = !this.hideAllPanel;
|
|
this.drawerChange(!this.hideAllPanel)
|
|
if(!this.hideAllPanel){
|
|
this.player.api.cameraTour.stop();
|
|
this.player.api.settings.setInteractiveMode(0)
|
|
}
|
|
}
|
|
|
|
public toggleHeight(){
|
|
this.openLayerDrawer = !this.openLayerDrawer;
|
|
}
|
|
|
|
public toggleLayer(layer){
|
|
if(this.lock){
|
|
this.$message.error("视口未加载完成")
|
|
return
|
|
}
|
|
layer.selected = !layer.selected;
|
|
if(layer.type === "moveMarker"){
|
|
this.addMarker(layer,true)
|
|
}else{
|
|
this.toggleArea(layer)
|
|
}
|
|
}
|
|
|
|
//获取点击的信息
|
|
getItem(item) {
|
|
this.addWarnning(item)
|
|
}
|
|
//进入自由导览
|
|
async showView (){
|
|
this.toggleAllPanel();
|
|
await this.player.api.camera.lookAt(
|
|
11660670.518125,
|
|
3692632.854824,
|
|
15.530475,
|
|
0,
|
|
9.213877,
|
|
85.199608,
|
|
2
|
|
)
|
|
setTimeout(()=>{
|
|
this.player.api.settings.setInteractiveMode(1);
|
|
this.player.api.settings.setMainUIVisibility(false)
|
|
},2000)
|
|
|
|
//todo 进入自由导览
|
|
}
|
|
//展开导览右侧
|
|
showViewRight(data){
|
|
this.viewRightData = data
|
|
if (this.viewRightShow){
|
|
this.viewRightShow = false
|
|
setTimeout(()=>{
|
|
this.viewRightShow = true
|
|
})
|
|
}else{
|
|
this.viewRightShow = true
|
|
|
|
}
|
|
}
|
|
//右侧详情点击事件
|
|
showDetail(item){
|
|
if(this.currentEvent){
|
|
if(this.currentEvent.id === item.id){
|
|
return
|
|
}else{
|
|
this.viewLayer[this.currentEvent.id].selected = false;
|
|
this.addCustom(this.viewLayer[this.currentEvent.id],true);
|
|
this.currentEvent = null;
|
|
}
|
|
}
|
|
if(!this.viewLayer[item.id]){
|
|
const data = [] as any;
|
|
if(item.point>1){
|
|
for(let i = 0;i<item.point;i++){
|
|
data.push({
|
|
id:item.id+'_'+i,
|
|
position:item.position[i],
|
|
hasPop:i===1,
|
|
})
|
|
}
|
|
}else{
|
|
data.push({
|
|
id:item.id,
|
|
position:item.position,
|
|
hasPop:true
|
|
})
|
|
}
|
|
this.viewLayer[item.id] = {
|
|
type:"moveMarker",
|
|
assetPath:"/JC_CustomAssets/ParticleLibrary/Exhibition/火/火焰_10",
|
|
value:"fire",
|
|
popData:item,
|
|
showPop:true,
|
|
selected:true,
|
|
scale:[3,3,3],
|
|
urls:[],
|
|
ids:[],
|
|
data,
|
|
|
|
}
|
|
this.currentEvent = item;
|
|
}else{
|
|
this.viewLayer[item.id].selected = !this.viewLayer[item.id].selected;
|
|
if(this.viewLayer[item.id].selected){
|
|
this.currentEvent = item;
|
|
}
|
|
}
|
|
this.addCustom(this.viewLayer[item.id],true);
|
|
}
|
|
mounted() {
|
|
}
|
|
get showBackGround(){
|
|
let flag = this.currentNav === 'view' && !this.viewRightShow
|
|
return flag?'none':''
|
|
}
|
|
|
|
|
|
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)
|
|
}
|
|
layers.push(item)
|
|
}else{
|
|
if(item.selected){
|
|
this.toggleLayer(item)
|
|
}
|
|
}
|
|
})
|
|
return layers
|
|
}
|
|
|
|
//进入路线导览
|
|
playView(item){
|
|
this.toggleAllPanel()
|
|
this.player.api.cameraTour.play(item.id)
|
|
}
|
|
closeRight(){
|
|
this.viewRightShow = false;
|
|
const dom = document.querySelector('div.is-current') as any;
|
|
if (dom){
|
|
dom.classList.remove('is-current')
|
|
}
|
|
if(this.currentEvent ){
|
|
this.viewLayer[this.currentEvent.id].selected = false;
|
|
this.addCustom(this.viewLayer[this.currentEvent.id],true);
|
|
this.currentEvent = null;
|
|
}
|
|
}
|
|
|
|
deactivated(){
|
|
//
|
|
}
|
|
beforeDestory() {
|
|
if (this.player) {
|
|
this.player = null
|
|
}
|
|
}
|
|
}
|