删除设备图片

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

@@ -138,7 +138,11 @@
         <div class="propertyImage" id="pipelineViewer{{item.getID()}}">
           <p class="imgTitle">设计图纸</p>
           <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" accept="image/*" (change)='uploadLeftDomainImg($event, item)'><i nz-icon nzType="plus" nzTheme="outline"></i></a>
+          <div class="positionHandleImgVideo" style="width: 120px;" *ngIf="editMode && item.getPropertyData().img">
+            <a href="javascript:;" class="imgAndVideoUpload"><input type="file" accept="image/*" (change)='uploadLeftDomainImg($event, item)'><i nz-icon nzType="upload" nzTheme="outline"></i></a>
+            <i nz-icon nzType="delete" nzTheme="outline" (click)="deleteImg(item)"></i>
+          </div>
+          <a href="javascript:;" class="bottomPlanUpload uploadImgBox" *ngIf="editMode && !item.getPropertyData().img"><input type="file" accept="image/*" (change)='uploadLeftDomainImg($event, item)'><i nz-icon nzType="plus" nzTheme="outline"></i></a>
         </div>
       </div>
     </div>
@@ -169,7 +173,11 @@
         <div class="propertyImage" id="orvrViewer{{item.getID()}}">
           <p class="imgTitle">设计图纸</p>
           <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" accept="image/*" (change)='uploadLeftDomainImg($event, item)'><i nz-icon nzType="plus" nzTheme="outline"></i></a>
+          <div class="positionHandleImgVideo" style="width: 120px;" *ngIf="editMode && item.getPropertyData().img">
+            <a href="javascript:;" class="imgAndVideoUpload"><input type="file" accept="image/*" (change)='uploadLeftDomainImg($event, item)'><i nz-icon nzType="upload" nzTheme="outline"></i></a>
+            <i nz-icon nzType="delete" nzTheme="outline" (click)="deleteImg(item)"></i>
+          </div>
+          <a href="javascript:;" class="bottomPlanUpload uploadImgBox" *ngIf="editMode && !item.getPropertyData().img"><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.scss

@@ -38,9 +38,9 @@
 .tableInput{ border: none; outline: none; background-color: transparent; width: 100%; height: 100%; }
 .tableSelect{ width: 100%; height: 100%; color: #fff; }
 .propertyImage{
-  padding-left: 15px;
-  img{ width: auto; max-height: 130px; display: block; margin-bottom: 10px; }
-  .imgTitle{ font-size: 14px; height: 20px; line-height: 20px; margin: 10px 0; }
+  position: relative;
+  .imgTitle{ font-size: 14px; height: 20px; line-height: 20px; margin: 10px 0; padding-left: 10px; }
+  img{ width: 120px; height: auto; max-height: 100px; display: block; margin-bottom: 10px; }
   .uploadImgBox{ margin: 0; width: 50px; height: 50px; line-height: 50px; text-align: center; }
 }
 

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

@@ -140,6 +140,17 @@ export class LeftDomainComponent implements OnInit {
     }
   }
 
+  //删除设备 图片
+  deleteImg(item: FacilityInfoUIItem) {
+    let isDelete = confirm("您确定要删除吗?")
+    if (isDelete) {
+      this.http.delete(`${item.getPropertyData().img}`).subscribe(data=>{
+        item.getPropertyData().img = ""
+        this.message.info("删除成功!");
+      })
+    }
+  }
+
   @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
   treeData: NzTreeNodeOptions[] = []; //tree data