import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; import { Game } from 'src/app/babylon/game'; import { LoginSatus } from 'src/app/babylon/controller/status/login-status'; import { StatusManager } from 'src/app/babylon/controller/status/status-manager'; import { InsitutionDataSimple } from 'src/app/babylon/model/data/institution/institution-data-simple'; import { ModeManager, ModeType } from 'src/app/babylon/controller/mode-manager'; import { ServeManager } from 'src/app/babylon/controller/serve-manager'; import { BuildingBasicInfosService } from 'src/app/service/babylon/building-basic-infos.service'; import { ObjectsService } from 'src/app/service/objects.service'; import { ToolbarWindow } from 'src/app/babylon/view/toolbar-window/toobar-window'; import { BuildingStatus } from 'src/app/babylon/controller/status/building-status'; import { BuildingUIItem } from 'src/app/babylon/view/building-window/building-ui-item'; import { BuildingType } from 'src/app/babylon/model/data/institution/building/building-data'; import { BuildingWindow } from 'src/app/babylon/view/building-window/building-window'; import { FacilityUIItem } from 'src/app/babylon/view/facility-window/facility-ui-item'; import { FacilityWindow } from 'src/app/babylon/view/facility-window/facility-window'; import { FacilityInfoUIItem } from 'src/app/babylon/view/facilityinfoinscene-window/facilityinfo-ui-item'; import { EventManager } from '@angular/platform-browser'; import { NzMessageService } from 'ng-zorro-antd/message'; import { LeftDomainComponent } from '../left-domain/left-domain.component'; import { JYZInfoMoudleType } from 'src/app/babylon/model/data/institution/jyz-show-data'; import { AllMarkData } from 'src/app/babylon/model/data/mark/all-mark-data'; import { MarkData } from 'src/app/babylon/model/data/mark/mark-data'; import { MarkWindow } from 'src/app/babylon/view/mark-window/mark-window'; import { AllMarkPlanData, MarkNodeData, MarkPlanData } from 'src/app/babylon/model/data/mark/mark-plan-data'; @Component({ selector: 'app-plan', templateUrl: './plan.component.html', styleUrls: ['./plan.component.scss', './publicPop.scss'] }) export class PlanComponent implements OnInit { constructor(private element: ElementRef, private buildingBISrv: BuildingBasicInfosService, private objectsSrv: ObjectsService, private eventManager: EventManager, private message: NzMessageService) { } static instance: PlanComponent; public game: Game = new Game(); public beforeOneSatus; //当前 satus public canvas: HTMLCanvasElement; //canvas 实例 public editMode: boolean = true; //编辑/查看 模式 public userMode: boolean = ModeManager.s_isMakeMode; //是否为 内部权限 public isShowLoading: boolean = true; //显隐 loading加载条 ngOnInit(): void { PlanComponent.instance = this; ServeManager.Init(this.buildingBISrv, this.objectsSrv); this.canvas = this.element.nativeElement.querySelector('#center') as HTMLCanvasElement; this.game.init(this.canvas); let editMode = sessionStorage.getItem('isGasStation') if (editMode == 'false') { this.editMode = true ModeManager.currentMode = ModeType.Edit } else { this.editMode = false ModeManager.currentMode = ModeType.Look } //监听 delete键盘事件 this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => { if (event.keyCode == 46) { //delete if (this.beforeOnePropertyData) { let isDelete = confirm("是否删除已选择模型?"); if (isDelete) { this.beforeOnePropertyData.askDelete(false) }; } } }) //监听 delete键盘事件 } ngAfterViewInit(): void { let simpleData: InsitutionDataSimple = new InsitutionDataSimple(); simpleData.id = 1; //来自选中的单位的信息 ,测试：1 simpleData.key = "ceshi"; //正式： id.tostring()，测试："ceshi" simpleData.name = "测试"; //来自选中的单位的信息 ,测试："测试" let has3dData = true;//是否有三维数据，来自选中单位的信息 let loginStatus = StatusManager.getStatus(LoginSatus); if (ModeManager.institutionDemoKey == ModeManager.c_demoKey_null) { //无指定测试单位，则为正式启动，根据当前单位key寻找 if (has3dData) { //如果已经有三维数据，直接进入 this.beforeOneSatus = StatusManager.getStatus(LoginSatus); this.beforeOneSatus.onSelectInsSuccess(simpleData) } else { //如果没有三维数据 if (ModeManager.s_isMakeMode) //内部制作模式下，询问新建 { let isAdd = confirm('没有单位' + simpleData.key + ',是否进行初始化？') if (isAdd) { let name = simpleData.key; let id = 2;// 单位id loginStatus.createInsitution(simpleData.key, name, id); } } else //非内部制作模式，不开启 { console.log("没有单位" + simpleData.key); } } } else { //let find = data.find(item => { return item.key === ModeManager.institutionDemoKey }) let find = simpleData; //测试单位 if (find) { sessionStorage.setItem('unitId', find.key) this.beforeOneSatus = StatusManager.getStatus(LoginSatus); this.beforeOneSatus.onSelectInsSuccess(find) } else { //this.modelInit(data) //开发模式 选择单位 弹窗 } } } ngOnDestroy(): void { //组件销毁前 销毁canvas this.game.dispose(); this.game = null; } //开发模式 选择单位 弹窗 modelInit(InsList) { } allFence: string[] = ["基本信息", "加油机", "油罐设备", "消防设施", "安全疏散", "输油管线", "油气回收", "应急预案"]; //头部 功能栏 selectFence: number = -1; //选中 头部功能栏 isShowChildComponent: boolean = false; //是否 显示左侧子组件 @ViewChild('leftDomain') leftDomain: LeftDomainComponent; //子组件引用 isOpenAwning: boolean = true; //是否 打开罩棚 selectMeasure: number = 0; //当前选择 测量工具 //切换 头部功能栏 toggleHeaderFence(type: number) { this.beforeOneSatus = StatusManager.getStatus(BuildingStatus); let buildingWindow: BuildingWindow = this.beforeOneSatus.buildingWindow; let fenceType: JYZInfoMoudleType = this.getFenceType(type) this.isShowNature = false //隐藏属性栏 if (this.selectFence != type) { if (this.selectFence === 7) { //初始化 应急预案模块 this.initializePlan() } this.isShowChildComponent && this.leftDomain && type != 4 ? this.leftDomain.initComponent(type) : null; //手动初始化子组件 this.selectFence = type this.isShowChildComponent = true buildingWindow.changeJYZInfoModel(fenceType, true) } else { //取消选中 this.selectFence = -1 this.isShowChildComponent = false buildingWindow.changeJYZInfoModel(fenceType, false) if (type === 7) { //初始化 应急预案模块 this.initializePlan() } } } //获取 头部功能栏Type getFenceType(type: number): JYZInfoMoudleType { let fenceType if (type === 0) { fenceType = JYZInfoMoudleType.JBXX } else if (type === 1) { fenceType = JYZInfoMoudleType.JYJ } else if (type === 2) { fenceType = JYZInfoMoudleType.YG } else if (type === 3) { fenceType = JYZInfoMoudleType.XF } else if (type === 4) { fenceType = JYZInfoMoudleType.AQSS } else if (type === 5) { fenceType = JYZInfoMoudleType.SYG } else if (type === 6) { fenceType = JYZInfoMoudleType.YQHSGX } else if (type === 7) { fenceType = JYZInfoMoudleType.YJCZ } return fenceType } //子组件 创建预案/保存 noticeChildComponent(type: boolean) { if (this.isShowChildComponent && this.leftDomain) { if (type) { //创建预案 this.leftDomain.addDisposalPop = true } else { //整体保存 this.leftDomain.saveDisposal() } } } //切换 头部罩棚 toggleHeaderAwning(isOpen: boolean) { this.isOpenAwning = isOpen; ToolbarWindow.instance.showZP(isOpen) } //切换 测量工具 toggleMeasure(type: number) { if (this.selectMeasure != type) { //切换工具 this.selectMeasure = type if (type === 1) { ToolbarWindow.instance.measureDistance() } else if (type === 2) { ToolbarWindow.instance.measureHeight() } else { ToolbarWindow.instance.measureArea() } } else { //关闭测量工具 this.selectMeasure = 0 ToolbarWindow.instance.endMeasure() } } buildingUIItems: BuildingUIItem[] = []; //左侧 建筑list beforeOneBuildingID: string = null; //选中 左侧建筑ID modelBuilding: modelBuilding = new modelBuilding(); //创建/编辑 建筑ngModel数据 addBuildingPop: boolean = false; //显隐 新增左侧建筑弹窗 editBuildingPop: BuildingUIItem = null; //显隐 编辑左侧建筑弹窗 isShowLeftBuilding: boolean = true; //显隐 建筑list toggleLeftBuilding(e) { this.isShowLeftBuilding = e }; //显隐 建筑list uploadList: File[] = []; //多选上传文件 //选择文件 selectFile(e) { if (e.target.files.length) { this.uploadList = [] //多选上传 Object.keys(e.target.files).forEach(item => { this.uploadList.push(e.target.files[item]) }) } } //选择建筑 selectLeftBuilding(e) { let item: BuildingUIItem = e; this.beforeOneBuildingID = item.getBuildingID() item.select(); } //创建/编辑建筑 addModelBuilding(e: modelBuilding) { if (this.addBuildingPop) { //新增 let order = this.buildingUIItems.length + 1; this.beforeOneSatus = StatusManager.getStatus(BuildingStatus); let buildingWindow: BuildingWindow = this.beforeOneSatus.buildingWindow; let newBuildingData = this.beforeOneSatus.createOneBuildingInData(e.name, e.name, e.modelType); buildingWindow.changeModel(this.uploadList, newBuildingData); buildingWindow.createOneBuildingItem(newBuildingData, order); this.modelBuilding = new modelBuilding(); this.buildingUIItems = this.beforeOneSatus.buildingWindow.buildingUIItems; //更新 建筑列表list this.addBuildingPop = false; //关闭弹窗 } else if (this.editBuildingPop) { //编辑 this.editBuildingPop.setBuildingName(e.name); this.editBuildingPop.changeModel(this.uploadList); this.editBuildingPop = null; //关闭弹窗 } } //打开编辑建筑 弹窗 editModelBuilding(event, e: BuildingUIItem) { event.stopPropagation() this.modelBuilding.name = JSON.parse(JSON.stringify(e.getBuildingName())) this.modelBuilding.modelType = JSON.parse(JSON.stringify(e.getBuildingType())) this.editBuildingPop = e; //打开弹窗 } //聚焦 建筑 positionModelBuilding(event, e: BuildingUIItem) { event.stopPropagation() e.lookAt() } //删除建筑 deleteModelBuilding(event, e: BuildingUIItem) { event.stopPropagation() let isTrue = confirm('您确定要删除吗') if (isTrue) { this.beforeOneSatus = StatusManager.getStatus(BuildingStatus); let buildingWindow: BuildingWindow = this.beforeOneSatus.buildingWindow; buildingWindow.deleteBuilding(e) this.buildingUIItems = this.beforeOneSatus.buildingWindow.buildingUIItems; //更新 建筑列表list } } allFacilityUIItemes: FacilityUIItem[] = []; //右侧所有 图标 allMarkData: planIcons = new planIcons(); //右侧处置预案所有 图标 beforeOneIcon: string = null; //当前选择 图标 // 获取 底部图标栏list getAllIcons(e: FacilityWindow) { this.allFacilityUIItemes = e.allFacilityUIItemes this.beforeOneIcon = null } //选择底部图标 selectBottomIcon(e: FacilityUIItem | MarkData) { if (e instanceof FacilityUIItem) { if (this.beforeOneIcon != e.getIconID()) { this.beforeOneIcon = e.getIconID() e.select() } else { this.beforeOneIcon = null e.unSelect() } } else if (e instanceof MarkData) { if (this.beforeOneIcon != e.key) { this.beforeOneIcon = e.key MarkWindow.instance.selectMarkDataPrefab(true, e) } else { this.beforeOneIcon = null MarkWindow.instance.selectMarkDataPrefab(false, e) } } } //取消选择 底部图标 unSelectBottomIcon() { if (this.beforeOneIcon) { let e: FacilityUIItem = this.allFacilityUIItemes.find(item => { return item.getIconID() === this.beforeOneIcon }) e ? e.unSelect() : null this.beforeOneIcon = null } } //底部图标栏 滚动条 bottomScroll(e) { let bootomDiv = this.element.nativeElement.querySelector('#bottomCenter') e == 0 ? bootomDiv.scrollLeft = bootomDiv.scrollLeft + 50 : bootomDiv.scrollLeft = bootomDiv.scrollLeft - 50 } isShowNature: boolean = false; //显隐设备 属性栏 beforeOnePropertyData: FacilityInfoUIItem = null; //当前选择 设备 naturePosition: naturePosition = new naturePosition(); //设备栏 定位位置 //选中 设备 selectProperty(e: FacilityInfoUIItem) { this.isShowNature = true this.beforeOnePropertyData = e console.log(e.getPropertyData(), '选中设备') if (this.isShowChildComponent && this.leftDomain) { this.leftDomain.selectFacilityId = e.getID() } } allMarkPlanData: AllMarkPlanData; //处置预案节点 数据 beforeEmergencyPlan: MarkPlanData = new MarkPlanData(-99, "请选择节点"); //当前选择 应急预案 beforePlanNode: MarkNodeData = new MarkNodeData(-99, "请选择节点"); //当前选择 预案节点 nzCurrent: number = -1; //当前选择 预案节点Index isSuspend: boolean = false; //是否暂停 自动切换节点 timer: any; //定时器 progressList: number[] = []; //进度条 条/值 updateTimer: any; //更新进度条定时器 //初始化 应急预案模块 initializePlan() { this.beforeEmergencyPlan = new MarkPlanData(-99, "请选择节点") this.beforePlanNode = new MarkNodeData(-99, "请选择节点") this.isSuspend = false //初始化暂停状态 window.clearTimeout(this.timer) //清除定时器 this.progressList = [] window.clearTimeout(this.updateTimer) //清除定时器 } //公用 切换选中节点 publicToggleNode() { return new Promise((resolve, reject) => { this.beforePlanNode = this.beforeEmergencyPlan.nodes[this.nzCurrent] this.leftDomain.selectPlanId = this.beforeEmergencyPlan.id this.leftDomain.selectNodeId = this.beforePlanNode.id MarkWindow.instance.selectMarkNode(this.beforeEmergencyPlan.id, this.beforePlanNode.id, false, true) this.beforePlanNode = MarkWindow.instance.currentMarkNodeInfo.nodeData this.updateProgress() //更新进度条 resolve(true) }) } //选中 底部一级节点 开启自动播放 selectChildNode(item: MarkPlanData) { if (this.isShowChildComponent && this.leftDomain) { if (item.nodes.length) { let isTrue = confirm("即将开始播放节点") if (isTrue) { this.timer? window.clearTimeout(this.timer) : null //清除定时器 this.updateTimer? window.clearTimeout(this.updateTimer) : null //清除定时器 this.nzCurrent = 0 this.beforeEmergencyPlan = item this.updateProgressList().then(res=>{ this.publicToggleNode().then(data=>{ !this.isSuspend? this.autoPlay() : null }) }) } } else { this.message.info('暂无数据节点'); } } } //更新进度条 值 updateProgress() { if (this.progressList[this.nzCurrent] >= 100) { this.progressList[this.nzCurrent] = 100 window.clearTimeout(this.updateTimer) //清除定时器 return } let time: number = this.beforePlanNode.getShowTime() || 1 this.updateTimer = window.setTimeout(()=>{ this.progressList[this.nzCurrent] = this.progressList[this.nzCurrent] + Math.ceil(100 / time) this.updateProgress() },1000) } //更新进度条 条数 updateProgressList() { return new Promise((resolve, reject) => { this.progressList = [] this.beforeEmergencyPlan.nodes.forEach(item=>{ this.progressList.push(0) }) resolve(true) }) } //自动播放-切换接点 autoPlay() { let time: number = this.beforePlanNode.getShowTime() || 1 this.timer = window.setTimeout(()=>{ if (this.nzCurrent >= this.beforeEmergencyPlan.nodes.length - 1) { this.isSuspend = false //初始化暂停状态 window.clearTimeout(this.timer) //清除定时器 this.message.info('已播放至最后一节点'); return } this.nzCurrent = this.nzCurrent + 1 this.publicToggleNode().then(data=>{ !this.isSuspend? this.autoPlay() : null }) },time * 1000) } //切换预案节点 changePlanNode(event){ if (this.progressList.length != this.beforeEmergencyPlan.nodes.length) { this.updateProgressList() } this.timer? window.clearTimeout(this.timer) : null //清除定时器 this.updateTimer? window.clearTimeout(this.updateTimer) : null //清除定时器 this.nzCurrent = event this.progressList[this.nzCurrent] = 0 this.publicToggleNode() } //切换预案节点 上一个 toLast() { if (this.beforeEmergencyPlan.id === -99 || this.beforePlanNode.id === -99) { this.message.info('请选择节点'); return } if (this.nzCurrent <= 0) { this.message.info('目前已经是第一节点'); return } if (this.progressList.length != this.beforeEmergencyPlan.nodes.length) { this.updateProgressList() } this.timer? window.clearTimeout(this.timer) : null //清除定时器 this.updateTimer? window.clearTimeout(this.updateTimer) : null //清除定时器 this.nzCurrent = this.nzCurrent - 1 this.progressList[this.nzCurrent] = 0 this.publicToggleNode().then(data=>{ //!this.isSuspend? this.autoPlay() : null }) } //切换预案节点 暂停 suspend(isSuspend: boolean) { if (this.beforeEmergencyPlan.id === -99 || this.beforePlanNode.id === -99) { this.message.info('请选择节点'); return } if (this.progressList.length != this.beforeEmergencyPlan.nodes.length) { this.updateProgressList() } this.isSuspend = isSuspend let msg: string = this.isSuspend? "目前已暂停" : "目前已开始播放" this.message.info(msg); if (this.isSuspend) { //暂停 window.clearTimeout(this.timer) //清除定时器 window.clearTimeout(this.updateTimer) //清除定时器 } else { //开启 this.timer? window.clearTimeout(this.timer) : null //清除定时器 this.updateTimer? window.clearTimeout(this.updateTimer) : null //清除定时器 this.progressList.forEach((item,index)=>{ index >= this.nzCurrent? this.progressList[index] = 0 : null }) MarkWindow.instance.selectMarkNode(this.beforeEmergencyPlan.id, this.beforePlanNode.id, false, true) this.updateProgress() this.autoPlay() } } //切换预案节点 初始化 initialize() { if (this.beforeEmergencyPlan.id === -99 || this.beforePlanNode.id === -99) { this.message.info('请选择节点'); return } this.timer? window.clearTimeout(this.timer) : null //清除定时器 this.updateTimer? window.clearTimeout(this.updateTimer) : null //清除定时器 this.updateProgressList().then(res=>{ this.nzCurrent = 0 this.publicToggleNode().then(data=>{ !this.isSuspend? this.autoPlay() : null }) }) } //切换预案节点 下一个 toNext() { if (this.beforeEmergencyPlan.id === -99 || this.beforePlanNode.id === -99) { this.message.info('请选择节点'); return } if (this.nzCurrent >= this.beforeEmergencyPlan.nodes.length - 1) { this.message.info('目前已经是最后一个节点'); return } if (this.progressList.length != this.beforeEmergencyPlan.nodes.length) { this.updateProgressList() } this.timer? window.clearTimeout(this.timer) : null //清除定时器 this.updateTimer? window.clearTimeout(this.updateTimer) : null //清除定时器 this.nzCurrent = this.nzCurrent + 1 this.progressList[this.nzCurrent] = 0 this.publicToggleNode().then(data=>{ //!this.isSuspend? this.autoPlay() : null }) } //获取进度条 flex分布 getProgressFlex(e: MarkNodeData):string { let length: number = 0 this.beforeEmergencyPlan.nodes.forEach(item=>{ length = length + (item.getShowTime() || 1) }) let percentage: number = (e.getShowTime() || 1) / length return `${percentage * 100}%` } //选中应急预案 设备 selectSandTableMark(markData: MarkData, select: boolean) { MarkWindow.instance.selectMarkData(markData, select) } selectRightTopFast: number = 0; //当前选择功能 快捷栏 selectAdsorb: boolean = false; //吸附状态 topLevelView: boolean = false; //顶视图状态 //获取设备 getDevice() { ToolbarWindow.instance.getModelAndCreateFacilityData() } //清空设备 clearDevice() { let isClear = confirm('您确定要清空吗?') if (isClear) { ToolbarWindow.instance.clearAllFacilityDataFromMesh() } } //平移 translation() { this.selectRightTopFast = 0 ToolbarWindow.instance.changeGizmoType_position(); } //旋转 revolve() { this.selectRightTopFast = 1 ToolbarWindow.instance.changeGizmoType_Rotation(); } //缩放 scale() { this.selectRightTopFast = 2 ToolbarWindow.instance.changeGizmoType_Scale(); } //吸附 adsorb() { ToolbarWindow.instance.changeMeshAdsorbY(); } //获取吸附的状态 updateSelectAdsorb() { this.selectAdsorb = ToolbarWindow.instance.isMeshAdsorb; } //切换至顶视图 toggleTopLevelView() { this.topLevelView = !this.topLevelView ToolbarWindow.instance.changeTopView(this.topLevelView) } //保存 preserve(type: boolean) { if (type) { ToolbarWindow.instance.onBtnSave(); } else { ToolbarWindow.instance.saveShowMoudleData(); } } //通用 消息通知栏 openSnackBar(title: string) { this.message.info(title); } /** * 展示加载遮罩 * @param show */ showLoading(show: boolean) { this.isShowLoading = show; } } //属性栏 定位 export class naturePosition { top: string = "1%" left: string = "50%" right: string = "5%" } // 处置预案 所有图标 export class planIcons { iconsName: string[] = ["灾情", "内部力量", "外部力量", "其他"] icons: MarkData[][] = [AllMarkData.CreateAllMarkData().marks_Disaster, AllMarkData.CreateAllMarkData().marks_Inside, AllMarkData.CreateAllMarkData().marks_Outside, AllMarkData.CreateAllMarkData().marks_Other,] } //创建/编辑 建筑dataType export class modelBuilding { name: string = ""; modelType: BuildingType = BuildingType.Normal; }