全景图完善

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

@@ -71,8 +71,9 @@
       </div>
       <div class="natureContent" *ngIf="beforeOnePropertyData.getPropertyData().img != undefined" id="propertyImg">
         <div class="natureTitle">图片</div>
+        <div class="natureTitle" *ngIf="beforeOnePropertyData.getPropertyData().is360 != undefined"><label nz-checkbox [(ngModel)]="beforeOnePropertyData.getPropertyData().is360" [nzDisabled]="!editMode" (ngModelChange)="togglePanorama($event)">全景照片</label></div>
         <div class="natureImg" *ngIf="beforeOnePropertyData.getPropertyData().img">
-          <img [src]="beforeOnePropertyData.getPropertyData().img" [attr.data-original]="beforeOnePropertyData.getPropertyData().img">
+          <img [src]="beforeOnePropertyData.getPropertyData().img" [attr.data-original]="beforeOnePropertyData.getPropertyData().img" (click)="lookPanorama()">
           <div class="positionHandleImgVideo" style="width: 120px;" *ngIf="editMode && beforeOnePropertyData.getPropertyData().img">
             <a href="javascript:;" class="imgAndVideoUpload"><input type="file" accept="image/*" (change)='uploadPropertyImg($event)'><i nz-icon nzType="upload" nzTheme="outline"></i></a>
             <i nz-icon nzType="delete" nzTheme="outline" (click)="deleteImgVideo(1)"></i>
@@ -260,8 +261,8 @@
     </nz-modal>
     <!-- 应急预案设备任务弹窗 -->
     <!-- 全景图/视频弹窗 -->
-    <nz-modal nzClassName="videoDialog" [(nzVisible)]="videoDialogType.url" nzFooter="null" (nzOnCancel)="videoDialogType.url = null;" nzWidth="90%">
+    <nz-modal nzClassName="videoDialog" [(nzVisible)]="videoDialogType.url" nzFooter="null" (nzOnCancel)="closePanorama()" nzWidth="90%">
-      <video [src]="videoDialogType.url" controls="controls" autoplay style="width: 100%; height: 100%;" [hidden]="!videoDialogType.isVideo"></video>
+      <video [src]="videoDialogType.url" controls="controls" autoplay style="width: 100%; height: 100%;" *ngIf="videoDialogType.isVideo"></video>
       <canvas id="panorama" [hidden]="videoDialogType.isVideo"></canvas>
     </nz-modal>
     <!-- 全景图/视频弹窗 -->

src/app/pages/plan/plan.component.scss

@@ -194,7 +194,7 @@
     box-sizing: border-box;
     padding: 0 20px;
     margin: 5px 0;
-    .natureTitle{ margin-bottom: 5px; height: 20px; line-height: 20px; }
+    .natureTitle{ margin-bottom: 5px; height: 20px; line-height: 20px; .ant-checkbox-wrapper{ color: #fff; } }
     input{ width: 100%; height: 28px; background: rgba(145, 204, 255, 0.41); border: 1px solid #91CCFF; padding: 0; resize: none; outline: none; }
     textarea{ width: 100%; height: 75px; background: rgba(145, 204, 255, 0.41); border: 1px solid #91CCFF; padding: 0; resize: none; outline: none; }
     .natureImg{ margin-bottom: 5px; position: relative; img{ width: 120px; height: auto; max-height: 100px; } }

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

@@ -31,6 +31,7 @@ import { FacilityInfoInSceneWindow } from 'src/app/babylon/view/facilityinfoinsc
 import { FacilityType } from 'src/app/babylon/model/data/model-data/model-data-facility';
 import { HttpClient } from '@angular/common/http';
 import { DataBuffer } from '@babylonjs/core';
+import { Photo360Tool } from 'src/app/babylon/tool/photo360-tool';
 
 
 
@@ -402,19 +403,21 @@ export class PlanComponent implements OnInit {
 
   //选中 设备
   selectProperty(e: FacilityInfoUIItem) {
+    this.propertyImg? this.propertyImg.destroy() : null
     this.isShowNature = true
     this.beforeOnePropertyData = e
     if (this.selectFence === 1 || this.selectFence === 2) { //刷新弹窗 位置
       this.renovateDialogPosition()
     }
-    console.log(e.getPropertyData(), '选中设备')
     if (this.isShowChildComponent && this.leftDomain) {
       this.leftDomain.selectFacilityId = e.getID()
     }
     if (this.selectFence === 0 && this.beforeOnePropertyData.getPropertyData() && this.beforeOnePropertyData.getPropertyData().img) { //img
-      window.setTimeout(() => {
+      if (!this.beforeOnePropertyData.getPropertyData().is360) {
-        this.propertyImg = new Viewer(this.element.nativeElement.querySelector('#propertyImg'), { url: 'data-original', navbar: false });
+        window.setTimeout(() => {
-      }, 0)
+          this.propertyImg = new Viewer(this.element.nativeElement.querySelector('#propertyImg'), { url: 'data-original', navbar: false });
+        }, 0)
+      }
     }
   }
 
@@ -424,6 +427,37 @@ export class PlanComponent implements OnInit {
     this.naturePosition.top = `${this.beforeOnePropertyData.getHeadUIPos().y - 150}px`
   }
 
+  //切换图片 全景/非全景
+  togglePanorama(event) {
+    if (!this.beforeOnePropertyData.getPropertyData().img) {
+      return
+    }
+    if (this.beforeOnePropertyData.getPropertyData().is360) { //全景模式 销毁 Viewer
+      this.propertyImg? this.propertyImg.destroy() : null
+    } else { //非全景模式 初始化 Viewer
+      window.setTimeout(() => {
+        this.propertyImg = new Viewer(this.element.nativeElement.querySelector('#propertyImg'), { url: 'data-original', navbar: false });
+      }, 0)
+    }
+  }
+
+  //查看图片 全景
+  lookPanorama() {
+    if (this.beforeOnePropertyData.getPropertyData().img && this.beforeOnePropertyData.getPropertyData().is360) { //全景模式 打开canvas弹窗
+      this.videoDialogType.isVideo = false
+      this.videoDialogType.url = this.beforeOnePropertyData.getPropertyData().img
+      window.setTimeout(()=>{
+        Photo360Tool.open(document.getElementById('panorama') as HTMLCanvasElement, this.videoDialogType.url)
+      },0)
+    }
+  }
+
+  //销毁全景图片 canvas/ 关闭弹窗
+  closePanorama() {
+    !this.videoDialogType.isVideo? Photo360Tool.close() : null
+    this.videoDialogType.url = null
+  }
+
   //上传设备 图片
   uploadPropertyImg(e) {
     if (e.target.files.length) {
@@ -434,15 +468,17 @@ export class PlanComponent implements OnInit {
         return
       }
       this.isShowLoading = true //打开遮罩
-      let institutionKey = this.companyData.id || "ceshi"; //单位id
+      let institutionKey = `${this.companyData.id}` || "ceshi"; //单位id
       let buildingKey = this.buildingUIItems.find(item => { return item.getBuildingID() == this.beforeOneBuildingID })
       let facility = this.beforeOnePropertyData
       let url = DataManager.getResPath_facilityProperty(institutionKey, buildingKey.getBuildingID(), facility.getType(), facility.getID(), null)
       ServeManager.instance.openFileSelect(file, url, (name: string, path: string) => { //上传
         this.beforeOnePropertyData.getPropertyData().img = ObjectsService.getFullPath(path + name)
-        window.setTimeout(() => {
+        if (!this.beforeOnePropertyData.getPropertyData().is360) {
-          this.propertyImg = new Viewer(this.element.nativeElement.querySelector('#propertyImg'), { url: 'data-original', navbar: false });
+          window.setTimeout(() => {
-        }, 0)
+            this.propertyImg = new Viewer(this.element.nativeElement.querySelector('#propertyImg'), { url: 'data-original', navbar: false });
+          }, 0)
+        }
         this.isShowLoading = false //关闭遮罩
         this.message.info("上传成功!");
       })
@@ -695,7 +731,7 @@ export class PlanComponent implements OnInit {
         return
       }
       this.isShowLoading = true //打开遮罩
-      let institutionKey = this.companyData.id || "ceshi"; //单位id
+      let institutionKey = `${this.companyData.id}` || "ceshi"; //单位id
       let resType = isVideo ? ResType.Video : ResType.Texture
       let key = `${(new Date()).getMonth() + 1}-${(new Date()).getDate()}-${(new Date()).getHours()}`
       let url = DataManager.getResPath_mark(institutionKey, resType, key) //url

src/styles.scss

@@ -134,6 +134,7 @@ h1 {
   height: 80%;
   .ant-modal-footer { padding: 0; }
   .ant-modal-body,.ant-modal-content { height: 100%; }
+  canvas{ width: 100%; height: 100%; border: none; outline: none; }
 }
 #threeDimensional {
   .ant-tree{ color: #C4E2FC; } //tree