483 lines
14 KiB
TypeScript
483 lines
14 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";
|
|
import WarningDetailComponent from "@/components/warningDetail.component.vue";
|
|
|
|
|
|
|
|
@Component({
|
|
components: {
|
|
HomeLeftComponent,
|
|
HomeRightComponent,
|
|
ViewLeftComponent,
|
|
ViewRightComponent,
|
|
ManageLeftComponent,
|
|
ManageRightComponent,
|
|
PermitPopUpComponent,
|
|
WarningDetailComponent
|
|
}
|
|
})
|
|
export default class OverViewComponent extends BaseComponent {
|
|
//当前菜单
|
|
public currentNav = 'home';
|
|
// 当前图层
|
|
public warnTimer = {};
|
|
//定时器
|
|
public timer: any = {};
|
|
|
|
public currentLayers = [] as any;
|
|
|
|
// 是否展开图层
|
|
public openLayerDrawer = false;
|
|
|
|
public currentCarPeople: any = {};
|
|
//展示导览右侧
|
|
viewRightShow = false;
|
|
|
|
dialogVisibleForBigPop = false;
|
|
|
|
bigPopTitle = '人员信息卡'
|
|
//默认打开的折叠面板
|
|
activeNames = ['1']
|
|
//展示告警详情右侧
|
|
waringRightShow = false
|
|
//显示展示隐藏按钮
|
|
showPlay = false
|
|
// 是否隐藏除地图外所有板块
|
|
public hideAllPanel = false;
|
|
public viewRightData = {};
|
|
//告警详情
|
|
public info = {};
|
|
public showLoading = true
|
|
|
|
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.showLoading = 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) {
|
|
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") {
|
|
this.emitPersonPop(currentData)
|
|
}
|
|
if (data.GroupID === "car") {
|
|
this.emitCarPop(currentData)
|
|
}
|
|
if (data.GroupID === "video") {
|
|
// this.openVideo(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();
|
|
}
|
|
this.waringRightShow = false
|
|
this.viewRightShow = false
|
|
}
|
|
|
|
|
|
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.showPlay = false
|
|
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)
|
|
|
|
this.info = item
|
|
if (this.waringRightShow) {
|
|
this.waringRightShow = false
|
|
setTimeout(() => {
|
|
this.waringRightShow = true
|
|
})
|
|
} else {
|
|
this.waringRightShow = true
|
|
}
|
|
const position = item.position
|
|
this.player.api.camera.lookAt(
|
|
position[0],
|
|
position[1],
|
|
position[2],
|
|
0,
|
|
position[3], //pitch
|
|
position[4], //yaw
|
|
2
|
|
)
|
|
|
|
}
|
|
|
|
//定位坐标
|
|
changePoint(item) {
|
|
this.addWarnning(item)
|
|
}
|
|
|
|
//关闭告警详情
|
|
changeClose() {
|
|
this.waringRightShow = false
|
|
this.player.api.customObject.delete(this.currentWanning.id)
|
|
}
|
|
|
|
//进入自由导览
|
|
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(2);
|
|
this.player.api.settings.setMainUIVisibility(false)
|
|
}, 2000)
|
|
|
|
//todo 进入自由导览
|
|
}
|
|
|
|
//展开导览右侧
|
|
showViewRight(data) {
|
|
if (data.area) {
|
|
this.addArea(data)
|
|
}
|
|
if (data.camera) {
|
|
this.player.api.camera.lookAt(...data.camera)
|
|
}
|
|
this.viewRightData = data;
|
|
this.viewRightShow = false
|
|
setTimeout(() => {
|
|
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 (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++) {
|
|
data.push({
|
|
id: item.id + '_' + i,
|
|
position: item.position[i],
|
|
rotation: item.rotation || [0, 90, 0],
|
|
hasPop: item.hasPop && i === 1,
|
|
})
|
|
}
|
|
} else {
|
|
data.push({
|
|
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: [],
|
|
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], item.hasPop);
|
|
}
|
|
|
|
if (item.needFocus) {
|
|
if (item.look) {
|
|
this.player.api.camera.lookAt(
|
|
item.look[0],
|
|
item.look[1],
|
|
item.look[2],
|
|
0,
|
|
item.look[4], //pitch
|
|
item.look[5], //yaw
|
|
2
|
|
)
|
|
} else {
|
|
this.player.api.customObject.focus(item.id, item.distance, 2)
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
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.layerData.forEach(item => {
|
|
if (item.selected) {
|
|
this.toggleLayer(item)
|
|
}
|
|
})
|
|
this.showPlay = true
|
|
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;
|
|
}
|
|
}
|
|
|
|
//暂停继续
|
|
playAction(type) {
|
|
this.player.api.cameraTour[type]()
|
|
}
|
|
|
|
// 打开摄像头
|
|
openVideo(item) {
|
|
// this.resetMap();
|
|
setTimeout(() => {
|
|
// this.player.api.marker.focus(item.id,20,2)
|
|
if (item.model === 'video') {
|
|
setTimeout(() => {
|
|
layer.open({
|
|
type: 1,
|
|
shade: 0,
|
|
title: item.remark,
|
|
content: `<div class="customClass">
|
|
<video src="${item.info}" controls style="width:100%" autoplay></video>
|
|
</div>`
|
|
})
|
|
}, 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>`
|
|
|
|
})
|
|
}, 1000)
|
|
}
|
|
|
|
}, 100)
|
|
}
|
|
|
|
deactivated() {
|
|
//
|
|
}
|
|
|
|
beforeDestory() {
|
|
if (this.player) {
|
|
this.player = null
|
|
}
|
|
clearInterval(this.timer)
|
|
}
|
|
}
|