Sinopec-Anxin/src/app/pages/plan/plan.component.ts

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>(LoginSatus);
    if (ModeManager.institutionDemoKey == ModeManager.c_demoKey_null) { //无指定测试单位，则为正式启动，根据当前单位key寻找
      if (has3dData) { //如果已经有三维数据，直接进入
        this.beforeOneSatus = StatusManager.getStatus<LoginSatus>(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>(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>(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>(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>(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;
}