设备上传图片完善

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

@@ -62,12 +62,12 @@
       <div class="natureHeader"><i nz-icon nzType="close-circle" nzTheme="outline" title="关闭" (click)="isShowNature = false;"></i></div>
       <div class="natureContent" *ngIf="beforeOnePropertyData.getPropertyData().info != undefined">
         <div class="natureTitle">详情</div>
-        <div><textarea [(ngModel)]="beforeOnePropertyData.getPropertyData().info"></textarea></div>
+        <div><textarea [(ngModel)]="beforeOnePropertyData.getPropertyData().info" [disabled]="!editMode"></textarea></div>
       </div>
-      <div class="natureContent" *ngIf="beforeOnePropertyData.getPropertyData().img != undefined">
+      <div class="natureContent" *ngIf="beforeOnePropertyData.getPropertyData().img != undefined" id="propertyImg">
         <div class="natureTitle">图片</div>
-        <div class="natureImg" *ngIf="beforeOnePropertyData.getPropertyData().img"><img [src]="beforeOnePropertyData.getPropertyData().img"></div>
-        <div><a href="javascript:;" class="bottomPlanUpload natureUpload"><input type="file"><i nz-icon nzType="plus" nzTheme="outline"></i></a></div>
+        <div class="natureImg" *ngIf="beforeOnePropertyData.getPropertyData().img"><img [src]="beforeOnePropertyData.getPropertyData().img" [attr.data-original]="beforeOnePropertyData.getPropertyData().img"></div>
+        <div *ngIf="editMode"><a href="javascript:;" class="bottomPlanUpload natureUpload"><input type="file" accept="image/*" (change)='uploadPropertyImg($event)'><i nz-icon nzType="plus" nzTheme="outline"></i></a></div>
       </div>
     </div>
     <div class="nature natureLook" *ngIf="isShowNature && (selectFence === 1 || selectFence === 2) && beforeOnePropertyData" [ngStyle]="{'top': naturePosition.top,'right': naturePosition.right}">

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

@@ -195,7 +195,7 @@
     margin-bottom: 5px;
     .natureTitle{ margin-bottom: 5px; height: 20px; line-height: 20px; }
     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; img{ width: auto; height: auto; max-width: 100%; } }
+    .natureImg{ margin-bottom: 5px; img{ width: auto; height: auto; max-height: 120px; } }
     .natureUpload{ margin: 0; text-align: center; width: 50px; height: 50px; line-height: 50px; }
   }
 }

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

@@ -339,6 +339,7 @@ export class PlanComponent implements OnInit {
 
   isShowNature: boolean = false; //显隐设备 属性栏
   beforeOnePropertyData: FacilityInfoUIItem = null; //当前选择 设备
+  propertyImg: Viewer; //设备图标Viewer 实例
   naturePosition: naturePosition = new naturePosition(); //设备栏 定位位置
 
   //选中 设备
@@ -349,6 +350,36 @@ export class PlanComponent implements OnInit {
     if (this.isShowChildComponent && this.leftDomain) {
       this.leftDomain.selectFacilityId = e.getID()
     }
+    if (this.beforeOnePropertyData.getPropertyData() && this.beforeOnePropertyData.getPropertyData().img) { //img
+      window.setTimeout(() => {
+        this.propertyImg = new Viewer(this.element.nativeElement.querySelector('#propertyImg'), { url: 'data-original' });
+      }, 0)
+    } 
+  }
+
+  //上传设备 图片
+  uploadPropertyImg(e) {
+    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
+      }
+      this.isShowLoading = true //打开遮罩
+      let institutionKey = sessionStorage.getItem('unitId') || "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' });
+        }, 0)
+        this.isShowLoading = false //关闭遮罩
+        this.message.info("上传成功!");
+      })
+    }
   }
 
   allMarkPlanData: AllMarkPlanData; //处置预案节点 数据