基本信息设备属性栏完善

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

@@ -58,7 +58,18 @@
     <!-- 左侧建筑栏 -->
 
     <!-- 右侧属性栏 -->
-    <div class="nature"></div>
+    <div class="nature" *ngIf="isShowNature && selectFence === 0 && beforeOnePropertyData && beforeOnePropertyData.getPropertyData()" [ngStyle]="{'right': editMode? '5%' : null}">
+      <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>
+      <div class="natureContent" *ngIf="beforeOnePropertyData.getPropertyData().img != undefined">
+        <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>
+    </div>
     <!-- 右侧属性栏 -->
 
     <!-- 右侧图标栏 -->

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

@@ -179,6 +179,28 @@
   transition: margin-left 0.5s;
 }
 
+//右侧属性栏
+.nature{
+  width: 230px;
+  position: absolute;
+  top: 1%;
+  right: 1%;
+  color: #C4E2FC;
+  font-size: 14px;
+  background: linear-gradient(360deg, #000D21 0%, rgba(0, 59, 110, 0.8) 100%);
+  overflow: hidden;
+  .natureHeader{ text-align: right; height: 10px; .anticon{ font-size: 18px; margin: 5px 5px 0 0; } }
+  .natureContent{
+    box-sizing: border-box;
+    padding: 0 20px;
+    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%; } }
+    .natureUpload{ margin: 0; text-align: center; width: 50px; height: 50px; line-height: 50px; }
+  }
+}
+
 //右侧图标栏
 .rightIcons{
   width: 100px;

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

@@ -300,11 +300,14 @@ export class PlanComponent implements OnInit {
     e == 0 ? bootomDiv.scrollLeft = bootomDiv.scrollLeft + 50 : bootomDiv.scrollLeft = bootomDiv.scrollLeft - 50
   }
 
+  isShowNature: boolean = false; //显隐设备 属性栏
   beforeOnePropertyData: FacilityInfoUIItem = null; //当前选择 设备
 
   //选中 设备
   selectProperty(e: FacilityInfoUIItem) {
+    this.isShowNature = true
     this.beforeOnePropertyData = e
+    console.log(e.getPropertyData(),'选中设备')
     if (this.isShowChildComponent && this.leftDomain) {
       this.leftDomain.selectFacilityId = e.getID()
     }
@@ -383,7 +386,6 @@ export class PlanComponent implements OnInit {
     this.isShowLoading = show;
   }
 
-
 }
 
 // 处置预案 所有图标