设备上传图片

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

@@ -97,10 +97,10 @@
         <div class="positionRightTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionRightBottom" *ngIf="selectFacilityId === item.getID()"></div>
         <!-- 选中样式 -->
         <p class="title"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().name"></p>
-        <div class="propertyImage">
+        <div class="propertyImage" id="pipelineViewer{{item.getID()}}">
           <p class="imgTitle" style="margin-top: 0px;">设计图纸</p>
-          <img src="../../../assets/images/upload.png">
+          <img [hidden]="!item.getPropertyData().img" [src]="item.getPropertyData().img" [attr.data-original]="item.getPropertyData().img">
-          <a href="javascript:;" class="bottomPlanUpload uploadImgBox" *ngIf="editMode"><input type="file"><i nz-icon nzType="plus" nzTheme="outline"></i></a>
+          <a href="javascript:;" class="bottomPlanUpload uploadImgBox" *ngIf="editMode"><input type="file" accept="image/*" (change)='uploadLeftDomainImg($event, item)'><i nz-icon nzType="plus" nzTheme="outline"></i></a>
         </div>
       </div>
     </div>
@@ -128,10 +128,10 @@
             <p><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().VRUPumpType"></p>
           </div>
         </div>
-        <div class="propertyImage">
+        <div class="propertyImage" id="orvrViewer{{item.getID()}}">
           <p class="imgTitle">设计图纸</p>
-          <img src="../../../assets/images/upload.png">
+          <img [hidden]="!item.getPropertyData().img" [src]="item.getPropertyData().img" [attr.data-original]="item.getPropertyData().img">
-          <a href="javascript:;" class="bottomPlanUpload uploadImgBox" *ngIf="editMode"><input type="file"><i nz-icon nzType="plus" nzTheme="outline"></i></a>
+          <a href="javascript:;" class="bottomPlanUpload uploadImgBox" *ngIf="editMode"><input type="file" accept="image/*" (change)='uploadLeftDomainImg($event, item)'><i nz-icon nzType="plus" nzTheme="outline"></i></a>
         </div>
       </div>
     </div>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { NzFormatEmitEvent, NzTreeComponent, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
 import { FacilityInfoInSceneWindow } from 'src/app/babylon/view/facilityinfoinscene-window/facilityinfoinscene-window';
 import { PlanComponent } from '../plan/plan.component';
@@ -11,6 +11,10 @@ import { AllMarkPlanData, MarkNodeData, MarkPlanData } from 'src/app/babylon/mod
 import { MarkWindow } from 'src/app/babylon/view/mark-window/mark-window';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { ModeManager, ModeType } from 'src/app/babylon/controller/mode-manager';
+import { DataManager } from 'src/app/babylon/controller/data-manager';
+import { ServeManager } from 'src/app/babylon/controller/serve-manager';
+import { ObjectsService } from 'src/app/service/objects.service';
+import Viewer from 'viewerjs';
 
 @Component({
   selector: 'app-left-domain',
@@ -19,15 +23,10 @@ import { ModeManager, ModeType } from 'src/app/babylon/controller/mode-manager';
 })
 export class LeftDomainComponent implements OnInit {
 
-  constructor(private message: NzMessageService) { }
+  constructor(private message: NzMessageService, private element: ElementRef) { }
 
   ngOnInit(): void {
-    let editMode = sessionStorage.getItem('isGasStation')
+    this.editMode = PlanComponent.instance.editMode
-    if (editMode == 'false') {
-      this.editMode = true
-    } else {
-      this.editMode = false
-    }
     this.initComponent()
   }
 
@@ -38,8 +37,6 @@ export class LeftDomainComponent implements OnInit {
 
   //初始化组件
   initComponent(type?: number) {
-    this.selectPlanId = null
-    this.selectNodeId = null
     if (type != undefined && type != null) {
       this.beforeFence = type
       this.handleFacility()
@@ -52,6 +49,8 @@ export class LeftDomainComponent implements OnInit {
   //处理 设备data
   handleFacility() {
     if (this.beforeFence === 7) { //应急预案
+      this.selectPlanId = null
+      this.selectNodeId = null
       if (MarkWindow.instance) {
         this.allMarkPlanData = MarkWindow.instance.allMarkPlanData
       }
@@ -75,6 +74,15 @@ export class LeftDomainComponent implements OnInit {
     this.selectFacilityId = null
     if (this.beforeFence === 3) { //消防设施
       this.handleTreeData(this.FacilityList)
+    } else if (this.beforeFence === 5 || this.beforeFence === 6) { //初始化 Viewer
+      let id: string = this.beforeFence === 5? "pipelineViewer" : "orvrViewer"
+      this.FacilityList.forEach(item=>{
+        if (item.getPropertyData() && item.getPropertyData().img) {
+          window.setTimeout(() => {
+            new Viewer(this.element.nativeElement.querySelector(`#${id}${item.getID()}`), { url: 'data-original' });
+          }, 0)
+        }
+      })
     }
   }
 
@@ -89,6 +97,36 @@ export class LeftDomainComponent implements OnInit {
     }
   }
 
+  //上传设备 图片
+  uploadLeftDomainImg(e, item: FacilityInfoUIItem) {
+    if (e.target.files.length) {
+      let maxSize = 30 * 1024 * 1024 //限制30MB
+      let file = e.target.files[0]
+      if (file.size > maxSize) { //超出限制
+        this.message.info("上传资源需小于30MB");
+        return
+      }
+      PlanComponent.instance.isShowLoading = true //打开遮罩
+      let institutionKey = sessionStorage.getItem('unitId') || "ceshi"; //单位id
+      let buildingKey = PlanComponent.instance.buildingUIItems.find(item => { return item.getBuildingID() == PlanComponent.instance.beforeOneBuildingID })
+      let url = DataManager.getResPath_facilityProperty(institutionKey, buildingKey.getBuildingID(), item.getType(), item.getID(), null)
+      ServeManager.instance.openFileSelect(file, url, (name: string, path: string) => { //上传
+        item.getPropertyData().img = ObjectsService.getFullPath(path + name)
+        if (this.beforeFence === 5) {
+          window.setTimeout(() => {
+            new Viewer(this.element.nativeElement.querySelector(`#pipelineViewer${item.getID()}`), { url: 'data-original' });
+          }, 0)
+        } else if (this.beforeFence === 6) {
+          window.setTimeout(() => {
+            new Viewer(this.element.nativeElement.querySelector(`#orvrViewer${item.getID()}`), { url: 'data-original' });
+          }, 0)
+        }
+        PlanComponent.instance.isShowLoading = false //关闭遮罩
+        this.message.info("上传成功!");
+      })
+    }
+  }
+
   @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
   treeData: NzTreeNodeOptions[] = []; //tree data
 

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

@@ -350,7 +350,7 @@ export class PlanComponent implements OnInit {
     if (this.isShowChildComponent && this.leftDomain) {
       this.leftDomain.selectFacilityId = e.getID()
     }
-    if (this.beforeOnePropertyData.getPropertyData() && this.beforeOnePropertyData.getPropertyData().img) { //img
+    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' });
       }, 0)
@@ -511,6 +511,7 @@ export class PlanComponent implements OnInit {
     } else { //开启
       this.updateTimer ? window.clearTimeout(this.updateTimer) : null //清除定时器
       this.progressList.forEach((item, index) => { index > this.nzCurrent ? this.progressList[index] = 0 : null })
+      if (this.progressList[this.nzCurrent] === 0) { MarkWindow.instance.selectMarkNode(this.beforeEmergencyPlan.id, this.beforePlanNode.id, false, true) }
       this.updateProgress()
     }
   }