视频播放完善

src/app/pages/left-domain/left-domain.component.ts

@@ -38,6 +38,8 @@ export class LeftDomainComponent implements OnInit {
 
   //初始化组件
   initComponent(type?: number) {
+    this.selectPlanId = null
+    this.selectNodeId = null
     if (type != undefined && type != null) {
       this.beforeFence = type
       this.handleFacility()
@@ -50,12 +52,9 @@ export class LeftDomainComponent implements OnInit {
   //处理 设备data
   handleFacility() {
     if (this.beforeFence === 7) { //应急预案
-      MarkWindow.instance ? this.allMarkPlanData = MarkWindow.instance.allMarkPlanData : null
+      if (MarkWindow.instance) {
-      EventManager.addListener(Event_GetAllMarkPlanData, (data: Event_GetAllMarkPlanData) => {
+        this.allMarkPlanData = MarkWindow.instance.allMarkPlanData
-        this.allMarkPlanData = data.data
+      }
-        PlanComponent.instance.allMarkPlanData = this.allMarkPlanData
-      })
-      PlanComponent.instance.allMarkPlanData = this.allMarkPlanData
       return
     }
     let list: FacilityInfoUIItem[] = []
@@ -210,31 +209,33 @@ export class LeftDomainComponent implements OnInit {
   //选中 数据节点
   selectNode(item: MarkPlanData, e: MarkNodeData, index: number) {
     if (this.selectPlanId != item.id || this.selectNodeId != e.id) { //选中
+      this.selectPlanId = item.id
+      this.selectNodeId = e.id
+      PlanComponent.instance.beforeEmergencyPlan = item
+      PlanComponent.instance.beforePlanNode = e
       if (PlanComponent.instance.progressList.length != item.nodes.length) {
         PlanComponent.instance.updateProgressList()
       }
       this.updateFatherData(index) //更新/初始化父组件 数据
-      this.selectPlanId = item.id
+      PlanComponent.instance.initViewer()
-      this.selectNodeId = e.id
       MarkWindow.instance.selectMarkNode(item.id, e.id)
-      PlanComponent.instance.beforeEmergencyPlan = item
       PlanComponent.instance.beforePlanNode = MarkWindow.instance.currentMarkNodeInfo.nodeData
     } else if (this.selectPlanId === item.id && this.selectNodeId === e.id) { //取消选中
+      this.selectPlanId = null
+      this.selectNodeId = null
       PlanComponent.instance.beforeEmergencyPlan = new MarkPlanData(-99, "请选择节点")
       PlanComponent.instance.beforePlanNode = new MarkNodeData(-99, "请选择节点")
       this.updateFatherData(index) //更新/初始化父组件 数据
-      this.selectPlanId = null
-      this.selectNodeId = null
       MarkWindow.instance.selectMarkNode(null, null)
     }
   }
 
   //更新/初始化父组件 数据
   updateFatherData(index) {
+    PlanComponent.instance.updateTimer? window.clearTimeout(PlanComponent.instance.updateTimer) : null //清除定时器
     PlanComponent.instance.progressList.forEach((item,key)=>{ key >= index? PlanComponent.instance.progressList[key] = 0 : PlanComponent.instance.progressList[key] = 100 })
     PlanComponent.instance.nzCurrent = index
     PlanComponent.instance.isSuspend = true //暂停
-    PlanComponent.instance.updateTimer? window.clearTimeout(PlanComponent.instance.updateTimer) : null //清除定时器
   }
 
   saveDisposalDialog: boolean = false; //整体保存预案 弹窗

src/app/pages/plan/plan.component.html

@@ -26,7 +26,7 @@
     <canvas id="center"></canvas>
 
     <!-- 左侧子组件 -->
-    <div class="leftChildComponent" *ngIf="editMode && isShowChildComponent && selectFence != 4" [ngStyle]="{ 'left': isShowLeftBuilding && editMode && userMode? '15%' : null }" [ngClass]="{'publicMoveUp': selectFence === 7}">
+    <div class="leftChildComponent" *ngIf="isShowChildComponent && selectFence != 4 || (!editMode && selectFence != 7)" [ngStyle]="{ 'left': isShowLeftBuilding && editMode && userMode? '15%' : null }" [ngClass]="{'publicMoveUp': selectFence === 7}">
       <div class="leftChildHeader">
         <div><i nz-icon nzType="star" nzTheme="outline"></i></div>
         <div>{{allFence[selectFence]}}<i nz-icon nzType="plus-circle" nzTheme="outline" *ngIf="selectFence === 7 && editMode" (click)="noticeChildComponent(true)"></i><i nz-icon nzType="save" nzTheme="outline" *ngIf="selectFence === 7 && editMode" (click)="noticeChildComponent(false)"></i></div>
@@ -152,7 +152,7 @@
           <a href="javascript:;" class="bottomPlanUpload" *ngIf="editMode && !beforePlanNode.texture"><input type="file" accept="image/*" (change)='uploadImgVideo($event, false)'><img src="../../../assets/images/uploadImg.png"></a>
         </div>
         <div class="planHeaderVideo">
-          <video [src]="beforePlanNode.video" [hidden]="!beforePlanNode.video"></video>
+          <video [src]="beforePlanNode.video" [hidden]="!beforePlanNode.video" (click)="openVideo(beforePlanNode.video)"></video>
           <a href="javascript:;" class="imgAndVideoUpload uploadVideo" *ngIf="editMode && beforePlanNode.video"><input type="file" accept="video/*" (change)='uploadImgVideo($event, true)'><i nz-icon nzType="border-inner" nzTheme="outline"></i></a>
           <a href="javascript:;" class="bottomPlanUpload" style="width: 100px;" *ngIf="editMode && !beforePlanNode.video"><input type="file" accept="video/*" (change)='uploadImgVideo($event, true)'><img src="../../../assets/images/uploadVideo.png"></a>
         </div>
@@ -243,7 +243,7 @@
     <!-- 应急预案设备任务弹窗 -->
     <!-- 全景图/视频弹窗 -->
     <nz-modal nzClassName="videoDialog" [(nzVisible)]="videoDialogType.url" nzFooter="null" (nzOnCancel)="videoDialogType.url = null;" nzWidth="90%">
-      <video [src]="videoDialogType.url" style="width: 100%; height: 100%;" [hidden]="!videoDialogType.isVideo"></video>
+      <video [src]="videoDialogType.url" controls="controls" autoplay style="width: 100%; height: 100%;" [hidden]="!videoDialogType.isVideo"></video>
       <canvas id="panorama" [hidden]="videoDialogType.isVideo"></canvas>
     </nz-modal>
     <!-- 全景图/视频弹窗 -->

src/app/pages/plan/plan.component.ts

@@ -25,6 +25,8 @@ import { MarkData, MarkTask } 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';
 import { DataManager, ResType } from 'src/app/babylon/controller/data-manager';
+import { EventManager as babylonEventManager } from 'src/app/babylon/controller/event-manager/event-manager';
+import { Event_GetAllMarkPlanData } from 'src/app/babylon/controller/event-manager/events/event-get-markplandata-success';
 
 
 
@@ -43,6 +45,7 @@ export class PlanComponent implements OnInit {
   public canvas: HTMLCanvasElement; //canvas 实例
   public editMode: boolean = true; //编辑/查看 模式
   public userMode: boolean = ModeManager.s_isMakeMode; //是否为 内部权限
+  public bucketName: string = ObjectsService.getFullPath("文件路径"); //当前桶名
   public isShowLoading: boolean = true; //显隐 loading加载条
 
   ngOnInit(): void {
@@ -135,10 +138,23 @@ export class PlanComponent implements OnInit {
       if (this.selectFence === 7) { //初始化 应急预案模块
         this.initializePlan()
       }
-      this.isShowChildComponent && this.leftDomain && type != 4 ? this.leftDomain.initComponent(type) : null; //手动初始化子组件
+      if (type === 7) { //初始化 应急预案 data
-      this.selectFence = type
+        this.isShowChildComponent && this.leftDomain? this.leftDomain.initComponent(type) : null; //手动初始化子组件
-      this.isShowChildComponent = true
+        this.selectFence = type
-      buildingWindow.changeJYZInfoModel(fenceType, true)
+        this.isShowChildComponent = true
+        buildingWindow.changeJYZInfoModel(fenceType, true)
+        MarkWindow.instance ? this.allMarkPlanData = MarkWindow.instance.allMarkPlanData : null;
+        babylonEventManager.addListener(Event_GetAllMarkPlanData, (data: Event_GetAllMarkPlanData) => {
+          this.allMarkPlanData = MarkWindow.instance.allMarkPlanData
+          this.isShowChildComponent && this.leftDomain? this.leftDomain.allMarkPlanData = MarkWindow.instance.allMarkPlanData : null
+        })
+        this.isShowChildComponent && this.leftDomain? this.leftDomain.allMarkPlanData = MarkWindow.instance.allMarkPlanData : null
+      } else {
+        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
@@ -356,10 +372,11 @@ export class PlanComponent implements OnInit {
   publicToggleNode() {
     return new Promise((resolve, reject) => {
       this.beforePlanNode = this.beforeEmergencyPlan.nodes[this.nzCurrent]
-      this.isShowChildComponent && this.leftDomain ? this.leftDomain.selectPlanId = this.beforeEmergencyPlan.id : null
+      this.isShowChildComponent && this.leftDomain? this.leftDomain.selectPlanId = this.beforeEmergencyPlan.id : null
-      this.isShowChildComponent && this.leftDomain ? this.leftDomain.selectNodeId = this.beforePlanNode.id : null
+      this.isShowChildComponent && this.leftDomain? this.leftDomain.selectNodeId = this.beforePlanNode.id : null
       MarkWindow.instance.selectMarkNode(this.beforeEmergencyPlan.id, this.beforePlanNode.id, false, true)
       this.beforePlanNode = MarkWindow.instance.currentMarkNodeInfo.nodeData
+      this.initViewer()
       this.updateProgress() //更新进度条
       resolve(true)
     })
@@ -547,10 +564,19 @@ export class PlanComponent implements OnInit {
   videoDialogType: videoDialog = new videoDialog(true, null); //全景图/视频 弹窗
   planNodeImg: Viewer; //应急预案图片Viewer 实例
 
+  //初始化 Viewer图片
+  initViewer() {
+    if (this.beforePlanNode.texture) {
+      window.setTimeout(() => {
+        this.planNodeImg = new Viewer(this.element.nativeElement.querySelector('#planNodeImg'), { url: 'data-original' });
+      }, 0)
+    }
+  }
+
   //上传 图片/视频
   uploadImgVideo(e, isVideo: boolean) {
     if (e.target.files.length) {
-      let maxSize = 20 * 1024 * 1024 //限制30MB
+      let maxSize = 30 * 1024 * 1024 //限制30MB
       let file = e.target.files[0]
       if (file.size > maxSize) { //超出限制
         this.message.info("上传资源需小于30MB");
@@ -563,12 +589,10 @@ export class PlanComponent implements OnInit {
       let url = DataManager.getResPath_mark(institutionKey, resType, key) //url
       ServeManager.instance.openFileSelect(file, url, (name: string, path: string) => { //上传
         if (!isVideo) { //img
-          this.beforePlanNode.texture = path + name
+          this.beforePlanNode.texture = ObjectsService.getFullPath(path + name)
-          window.setTimeout(() => {
+          this.initViewer()
-            this.planNodeImg = new Viewer(this.element.nativeElement.querySelector('#planNodeImg'), { url: 'data-original' });
-          }, 0)
         } else { //video
-          this.beforePlanNode.video = path + name
+          this.beforePlanNode.video = ObjectsService.getFullPath(path + name)
         }
         this.isShowLoading = false //关闭遮罩
         this.message.info("上传成功!");
@@ -576,6 +600,12 @@ export class PlanComponent implements OnInit {
     }
   }
 
+  //打开视频弹窗
+  openVideo(src: string) {
+    this.videoDialogType.isVideo = true
+    this.videoDialogType.url = src
+  }
+
   selectRightTopFast: number = 0; //当前选择功能 快捷栏
   selectAdsorb: boolean = false; //吸附状态
   topLevelView: boolean = false; //顶视图状态