From c5afb370b53378d10c3e0407bd97d95c99c24c1f Mon Sep 17 00:00:00 2001 From: cpf <1105965053@qq.com> Date: Thu, 2 Dec 2021 09:36:13 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=A8=E6=99=AF=E5=9B=BE=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/pages/plan/plan.component.html | 7 ++-- src/app/pages/plan/plan.component.scss | 2 +- src/app/pages/plan/plan.component.ts | 54 +++++++++++++++++++++----- src/styles.scss | 1 + 4 files changed, 51 insertions(+), 13 deletions(-) diff --git a/src/app/pages/plan/plan.component.html b/src/app/pages/plan/plan.component.html index 4716e0d..14b0173 100644 --- a/src/app/pages/plan/plan.component.html +++ b/src/app/pages/plan/plan.component.html @@ -71,8 +71,9 @@
图片
+
- +
@@ -260,8 +261,8 @@ - - + + diff --git a/src/app/pages/plan/plan.component.scss b/src/app/pages/plan/plan.component.scss index d644f22..9e543d7 100644 --- a/src/app/pages/plan/plan.component.scss +++ b/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; } } diff --git a/src/app/pages/plan/plan.component.ts b/src/app/pages/plan/plan.component.ts index 9b460cb..69c01ec 100644 --- a/src/app/pages/plan/plan.component.ts +++ b/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(() => { - this.propertyImg = new Viewer(this.element.nativeElement.querySelector('#propertyImg'), { url: 'data-original', navbar: false }); - }, 0) + if (!this.beforeOnePropertyData.getPropertyData().is360) { + window.setTimeout(() => { + 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(() => { - this.propertyImg = new Viewer(this.element.nativeElement.querySelector('#propertyImg'), { url: 'data-original', navbar: false }); - }, 0) + if (!this.beforeOnePropertyData.getPropertyData().is360) { + window.setTimeout(() => { + 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 diff --git a/src/styles.scss b/src/styles.scss index 643b993..de5f572 100644 --- a/src/styles.scss +++ b/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